小程式封裝request請求

小程式開發 · 發表 2019-01-25 17:23:48

摘要：前言小程式開發中都會呼叫後端工程師開發的API，小程式的開發文件提供了相對實用的APIwx.request() ，但是在開發的過程中，又遇到了一些問題，在小程式的專案開發時，呼叫的API不止一個，同一個API呼叫不止一次。同時，對於呼叫的API的管理也十分複雜，這樣...

前言

小程式開發中都會呼叫後端工程師開發的API，小程式的開發文件提供了相對實用的APIwx.request() ，但是在開發的過程中，又遇到了一些問題，在小程式的專案開發時，呼叫的API不止一個，同一個API呼叫不止一次。同時，對於呼叫的API的管理也十分複雜，這樣的背景下，對wx.request() 方法的封裝變得尤為重要。

解決思路

將API的路徑放在一個檔案裡面方便管理，並暴露出來。
封裝小程式的request 方法，並return (本文中用的promise 處理)。
具體實現函式

實現

新建apiList.js檔案用於存放適應的API介面

let host = 'http://127.0.0.1:3001'// 設定API介面的ip地址和埠

let apiList = {

login: host +'/user/login',//使用者登入的API

register: host + '/user/register',//使用者註冊的API

//...

}

module.exports = apiList;//暴露出來

新建request.js檔案以實現對wx.request() 的封裝

import apiList from './apiList'//引入apiList.js檔案

const apiRequest = (url, method, data, header) => {//接收所需要的引數，如果不夠還可以自己自定義引數
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) {
//介面呼叫成功
resolve(res);//根據業務需要resolve介面返回的json的資料
},
fail: function (res) {
// fail呼叫介面失敗
reject({ errormsg: '網路錯誤,請稍後重試', code: -1 });
}
})
});
return promise;//注意，這裡返回的是promise物件
}

//登入介面的呼叫
let login = (data)=>{
return new Promise((resolve, reject) => {
resolve (apiRequest(apiList.login, 'get', data))
})
}
//註冊介面的呼叫
let register= (data) => {
return new Promise((resolve, reject) => {
resolve(apiRequest(apiList.register, 'get', data))
})
}

//最後需要將具體呼叫的函式暴露出，給具體業務呼叫

export default {
login: login,
register: register
}

3.具體業務中的呼叫

var api = require('./request.js').default;

//登入點選事件
login(){
/**
*使用者輸入校驗
TODO
*/
let params = {
username:'xxx'
password:'xxx'
}
api.login(params).then(res=>{
console.log(res)//API返回的資料
//業務處理
})
}

總結

通過對小程式網路請求方法的二次封裝，使得我們的程式碼看上去更加的簡潔，在介面的管理上也相對的便利，比如在後端修改API的路徑時，只需要在apiList.js檔案中修改相應的API即可，也免去了修改時忽略了更多呼叫的麻煩。同時，也提高了程式碼的複用性，一勞永逸。

小程式封裝request請求

您可能也會喜歡…