將官方文檔中wx.request的參數(shù)貼上安吁，方便閱讀微信提供了api桶唐，開(kāi)發(fā)者可以通過(guò)wx.request來(lái)獲取服務(wù)器的數(shù)據(jù)和傳遞數(shù)據(jù)创橄。雖然api提供了很大的方便，但是調(diào)用多個(gè)接口時(shí)莽红，代碼重復(fù)性太高，我們可以進(jìn)一步封裝邦邦。
新建文件request.js，將請(qǐng)求的封裝方法寫(xiě)在里面
//var hasClick = false;
const http = (method, url, data, response, error) => {
if (hasClick) {
return
}
// hasClick = true
wx.showLoading({
title: '加載中...',
mask: true
})
wx.request({
method: method,
url: url,
header: {
'content-type': 'application/json'
// 'token': wx.getStorageSync("token")
},
data:data,
success: res => {
return response(res)
},
fail: err => {
return error(err)
},
complete: info => {
wx.hideLoading();
// hasClick = false
}
})
}
module.exports = {
_get: (url, data, response, error) => http('GET', url, data, response, error),
_post: (url, data, response, error) => http('POST', url, data, response, error),
_put: (url, data, response, error) => http('PUT', url, data, response, error),
_delete: (url, data, response, error) => http('DELETE', url, data, response, error),
}
當(dāng)發(fā)起請(qǐng)求的時(shí)候燃辖，界面出現(xiàn)“加載中...”的Loading界面鬼店，請(qǐng)求完成后，取消加載loading黔龟。設(shè)置加載loading的mask屬性為true妇智，可以顯示透明蒙層，防止觸摸穿透氏身。
有遮罩還不夠巍棱，某些情況下可能會(huì)發(fā)生多次請(qǐng)求（用戶(hù)迅速的點(diǎn)擊兩次請(qǐng)求按鈕，在遮罩層未出來(lái)之前）蛋欣。比如在點(diǎn)擊支付的時(shí)候航徙，由于調(diào)用支付前的誤操作，支付完成后再次彈出一個(gè)支付框陷虎，會(huì)給用戶(hù)帶來(lái)非常不好的體驗(yàn)到踏。
可以在封裝方法中加一個(gè)hasClick的“鎖”稿械，在開(kāi)始請(qǐng)求前檢查是否已經(jīng)發(fā)起過(guò)請(qǐng)求族展，如果沒(méi)有才發(fā)起這次請(qǐng)求，等到請(qǐng)求返回之后再把鎖的狀態(tài)恢復(fù)回去访忿。
頁(yè)面調(diào)用凿掂，在頁(yè)面的js文件中引用
import request from '../../request/request.js'
request(){
let data = {
params1:params1, //參數(shù)1
params2:params2, //參數(shù)2
}
request._get('http://192.168.1.30:8085/banner', data , res => {
console.log(res)
},err => {
console.log(err)
})
},
- 如果沒(méi)有請(qǐng)求參數(shù)伴榔，把data換成null就好
小程序默認(rèn)請(qǐng)求超時(shí)時(shí)間是60秒，等待時(shí)間有點(diǎn)長(zhǎng)缠劝，我們可以在app.json中進(jìn)行設(shè)置
{
//...
"networkTimeout": {
"request": 5000
}
}
每個(gè)頁(yè)面請(qǐng)求的時(shí)候都要引用封裝潮梯，還是有點(diǎn)麻煩。注意到小程序頁(yè)面都可以獲取app.js的實(shí)例（const app = getApp()）惨恭，所以可以改一下封裝秉馏，將封裝方法直接暴露出去，在app.js中再配置POST/GET等請(qǐng)求脱羡；請(qǐng)求的url也可以抽出來(lái)寫(xiě)在一起萝究，方便查找和修改免都。自己試一下吧~
//覺(jué)得有用的話，點(diǎn)個(gè)喜歡再走嘛（不要臉.jpg）
