§ 封装网络请求及 mock 数据
开始前请把
ch2-3分支中的code/目录导入微信开发工具
上一节中，我们对 index.js 文件中增加了 util 对象，并在对象中封装了很多公用方法
let util = {
log(){……},
alert(){……},
getStorageData(){……},
setStorageData(){……}
}
本节中，我们对常用的网络请求方法 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);
}
})
})
}
}
对于请求的参数，我们设置下默认值，方便调用
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
// 此处省略部分代码
}
}
如果是本地开发调试，需要增加我们的 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: Mock[url]
}
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);
}
})
}
})
}
}
如果请求接口调用时候，包含有参数 mock = true，会自动调用相应的 mock 数据，如果没有这个参数，就走正常流程去调数据。
调用方法如下：
util.request({
url: 'list',
mock: true,
data: {
tag:'微信热门',
start: 1,
days: 3,
pageSize: 5,
langs: 'en'
}
}).then(res => {
// do something
})
iKcamp官网：http://www.ikcamp.com
访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
iKcamp最新活动
与
“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。