§ 封裝網路請求及 mock 資料
本文配套視訊地址: v.qq.com/x/page/i055…
開始前請把
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官網:www.ikcamp.com
訪問官網更快閱讀全部免費分享課程:《iKcamp出品|全網最新|微信小程式|基於最新版1.0開發者工具之初中級培訓教程分享》。 包含:文章、視訊、原始碼
iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。
iKcamp最新活動
與
“天天練口語”
小程式總榜排名第四、教育類排名第一的研發團隊,面對面溝通交流。
2019年,iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦!