前言
小程序開發(fā)中都會調(diào)用后端工程師開發(fā)的API巧娱，小程序的開發(fā)文檔提供了相對實用的API wx.request()恩敌，但是在開發(fā)的過程中焦履，又遇到了一些問題岛琼，在小程序的項目開發(fā)時配乓，調(diào)用的API不止一個仿滔，同一個API調(diào)用不止一次。同時犹芹，對于調(diào)用的API的管理也十分復(fù)雜每界，這樣的背景下陡蝇，對wx.request()方法的封裝變得尤為重要。
解決思路
- 將API的路徑放在一個文件里面方便管理，并暴露出來纳账。
- 封裝小程序的
request方法，并return(本文中用的promise處理)。 - 具體實現(xiàn)函數(shù)
實現(xiàn)
- 新建apiList.js文件用于存放適應(yīng)的API接口
let host = 'http://127.0.0.1:3001' // 設(shè)置API接口的ip地址和端口
let apiList = {
login: host +'/user/login', //用戶登錄的API
register: host + '/user/register', //用戶注冊的API
//...
}
module.exports = apiList; //暴露出來
- 新建request.js文件以實現(xiàn)對
wx.request()的封裝
import apiList from './apiList' // 引入apiList.js文件
const apiRequest = (url, method, data, header) => { //接收所需要的參數(shù)，如果不夠還可以自己自定義參數(shù)
let promise = new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data ? data : null,
method: method,
header: header ? header : { 'content-type':'application/x-www-form-urlencoded'},
success: function (res) {
//接口調(diào)用成功
resolve(res); //根據(jù)業(yè)務(wù)需要resolve接口返回的json的數(shù)據(jù)
},
fail: function (res) {
// fail調(diào)用接口失敗
reject({ errormsg: '網(wǎng)絡(luò)錯誤,請稍后重試', code: -1 });
}
})
});
return promise; //注意翁巍，這里返回的是promise對象
}
//登錄接口的調(diào)用
let login = (data)=>{
return new Promise((resolve, reject) => {
resolve (apiRequest(apiList.login, 'get', data))
})
}
//注冊接口的調(diào)用
let register= (data) => {
return new Promise((resolve, reject) => {
resolve(apiRequest(apiList.register, 'get', data))
})
}
//最后需要將具體調(diào)用的函數(shù)暴露出，給具體業(yè)務(wù)調(diào)用
export default {
login: login,
register: register
}
3.具體業(yè)務(wù)中的調(diào)用
var api = require('./request.js').default;
//登錄點擊事件
login(){
/**
*用戶輸入校驗
TODO
*/
let params = {
username:'xxx'
password:'xxx'
}
api.login(params).then(res=>{
console.log(res) //API返回的數(shù)據(jù)
//業(yè)務(wù)處理
})
}
總結(jié)
通過對小程序網(wǎng)絡(luò)請求方法的二次封裝休雌，使得我們的代碼看上去更加的簡潔灶壶，在接口的管理上也相對的便利，比如在后端修改API的路徑時杈曲，只需要在apiList.js文件中修改相應(yīng)的API即可驰凛，也免去了修改時忽略了更多調(diào)用的麻煩。同時鱼蝉，也提高了代碼的復(fù)用性洒嗤，一勞永逸。
