前言
小程序開發(fā)中都會(huì)調(diào)用后端工程師開發(fā)的API，小程序的開發(fā)文檔提供了相對(duì)實(shí)用的API wx.request()，但是在開發(fā)的過程中，又遇到了一些問題，在小程序的項(xiàng)目開發(fā)時(shí)，調(diào)用的API不止一個(gè)，同一個(gè)API調(diào)用不止一次。同時(shí)，對(duì)于調(diào)用的API的管理也十分復(fù)雜，這樣的背景下，對(duì)wx.request()方法的封裝變得尤為重要。
解決思路
- 將API的路徑放在一個(gè)文件里面方便管理，并暴露出來。
- 封裝小程序的
request方法，并return(本文中用的promise處理)。 - 具體實(shí)現(xiàn)函數(shù)
實(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', //用戶注冊(cè)的API
//...
}
module.exports = apiList; //暴露出來
- 新建request.js文件以實(shí)現(xiàn)對(duì)
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ò)錯(cuò)誤,請(qǐng)稍后重試', code: -1 });
}
})
});
return promise; //注意，這里返回的是promise對(duì)象
}
//登錄接口的調(diào)用
let login = (data)=>{
return new Promise((resolve, reject) => {
resolve (apiRequest(apiList.login, 'get', data))
})
}
//注冊(cè)接口的調(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;
//登錄點(diǎn)擊事件
login(){
/**
*用戶輸入校驗(yàn)
TODO
*/
let params = {
username:'xxx'
password:'xxx'
}
api.login(params).then(res=>{
console.log(res) //API返回的數(shù)據(jù)
//業(yè)務(wù)處理
})
}
總結(jié)
通過對(duì)小程序網(wǎng)絡(luò)請(qǐng)求方法的二次封裝，使得我們的代碼看上去更加的簡潔，在接口的管理上也相對(duì)的便利，比如在后端修改API的路徑時(shí)，只需要在apiList.js文件中修改相應(yīng)的API即可，也免去了修改時(shí)忽略了更多調(diào)用的麻煩。同時(shí)，也提高了代碼的復(fù)用性，一勞永逸。
