微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

摘要: # <a>§ 封装网络请求及 mock 数据</a>
> 本文配套视频地址：
> https://v.qq.com/x/page/i05544fogcm.html > 开始前请把 `ch2-3` 分支中的 `code/` 目录导入微信开发工具
上一节中，我们对 index.js 文件中增加了 util 对象，并在对象中封装了很多公用方法

<a>§ 封装网络请求及 mock 数据</a>

本文配套视频地址：
https://v.qq.com/x/page/i05544fogcm.html

开始前请把

ch2-3

分支中的

code/

目录导入微信开发工具

<br>

上一节中，我们对 index.js 文件中增加了 util 对象，并在对象中封装了很多公用方法

let util = {
log(){……},
alert(){……},
getStorageData(){……},
setStorageData(){……}
}

<br>

本节中，我们对常用的网络请求方法 wx.request 进行封装

let util = {
// 此处省略部分代码
request(opt){
let {url, data, header, method, dataType} = opt
let self = this
return new Promise((resolve, reject)=>{
wx.request({
url: url,
data: data,
header: header,
method: method,
dataType: dataType,
success: function (res) {
if (res && res.statusCode == 200 && res.data) {
resolve(res.data);
} else {
self.alert('提示', res);
reject(res);
}
},
fail: function (err) {
self.log(err);
self.alert('提示', err);
reject(err);
}
})
})
}
}

<br>

对于请求的参数，我们设置下默认值，方便调用

const DEFAULT_REQUEST_OPTIONS = {
url: '',
data: {},
header: {
     "Content-Type": "application/json"
},
method: 'GET',
dataType: 'json'
}

let util = {
// 此处省略部分代码
request (opt){
let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
let {url, data, header, method, dataType, mock = false} = options
let self = this
// 此处省略部分代码
}
}

<br>

如果是本地开发调试，需要增加我们的 mock 假数据，对 util.request 进行修改

let util = {
// 此处省略部分代码
request (opt){
let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
let {url, data, header, method, dataType, mock = false} = options
let self = this
return new Promise((resolve, reject)=>{
if(mock){
let res = {
statusCode: 200,
data: Mockhttp://www.ikcamp.com" target=_blank>
}
if (res && res.statusCode == 200 && res.data) {
resolve(res.data);
} else {
self.alert('提示', res);
reject(res);
}
}else{
wx.request({
url: url,
data: data,
header: header,
method: method,
dataType: dataType,
success: function (res) {
if (res && res.statusCode == 200 && res.data) {
resolve(res.data);
} else {
self.alert('提示', res);
reject(res);
}
},
fail: function (err) {
self.log(err);
self.alert('提示', err);
reject(err);
}
})
}
})

}
}
[/code]
如果请求接口调用时候，包含有参数 mock = true，会自动调用相应的 mock 数据，如果没有这个参数，就走正常流程去调数据。

<br>

调用方法如下：

util.request({
url: 'list',
mock: true,
data: {
tag:'微信热门',
start: 1,
days: 3,
pageSize: 5,
langs: 'en'
}
}).then(res => {
// do something
})


iKcamp官网：[url=http://www.ikcamp.com]http://www.ikcamp.com

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码



iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp最新活动


报名地址：[url=http://www.huodongxing.com/event/5409924174200]http://www.huodongxing.com/event/5409924174200

与
“天天练口语”
小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。