微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
iKcamp
发布于 2018-01-04 17:34:59
发布于 2018-01-04 17:34:59
§ 封装网络请求及 mock 数据
本文配套视频地址： https://v.qq.com/x/page/i05544fogcm.html
开始前请把
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
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读