§ 封装网络请求及 mock 数据
本文配套视频地址:
https://v.qq.com/x/page/i0554...
开始前请把
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最新活动
报名地址:http://www.huodongxing.com/ev...
与
“天天练口语”
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
原文地址:https://www.cnblogs.com/homehtml/p/12203171.html
时间: 2024-10-24 23:37:21