1，前言
在開發微信小程序的過程中，避免不了和服務端請求數據，微信小程序給我們提供了wx.request這個API，調用方法如下
wx.request({
url: 'www.baidu.com', //僅為示例，並非真實的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認值
},
success (res) {
console.log(res.data)
}
});
作為一個合格的前端開發，為了代碼質量和優雅度（其實是因為懶），避免不了封裝一些重復代碼和功能，來使開發過程更加酣暢淋漓。
2，實現思路
項目中，wx.request的很多參數都是固定的，只需要改變data的值，而一般我們的邏輯處理都是在wx.request的回調success，fail和complete中操作的，並且有部分邏輯也是相同的，（比如判斷接口返回數據是否成功，根據成功或失敗顯示不同的提示框等等），所以博主在這邊用了Promise來做了一個鏈式調用封裝，少去了大部分重復語句。
3，實現過程
首先我們需要創建一個公共的requestFn.js文件，在這個文件中寫我們的wx.request的封裝，然后還需要創建一個公共的Api.js文件，這個里面存放我們的接口地址和自定義的function，最后，在微信小程序根目錄下的app.js中找到globalData，在里面寫上項目常用的請求域名，具體的如下圖。
目錄結構
app.js
3.1，request的封裝
在requestFn.js中，我們要做到的是創建一個function，在里面統一處理wx.request需要的參數和返回值，還有請求過程中的Loading提示，Toast提示，然后通過module.exports將這個function暴露出去，完整代碼如下。
const app = getApp();
const baseURL = app.globalData.baseURL;
const FN = require('../publicFn/public');
const Request = (options) =>{
return new Promise((resolve, reject) => {
FN.Loading(1);
wx.request({
url: baseURL + options.url || '',
data: options.data || {},
method: options.method || 'POST',
header:{'content-type': "application/x-www-form-urlencoded"},
responseType:options.responseType || "",
timeout:15000,
success (res) {
FN.LoadingOff();
if(res.statusCode === 200){
if(res.data.status === "y"){
resolve(res.data);
}else{
FN.Toast(res.data.info);
};
}else{
FN.Toast(res.errMsg);
};
},
fail (res) {
FN.Toast("網絡開小差了");
reject(res);
}
})
})
};
module.exports = {
Request
};
其中的FN，FN.Toast還有FN.Loading是博主自己二次封裝的一些微信小程序API，可以參考博主的另一篇文章：微信小程序API交互的自定義封裝
3.2，api的封裝
request已經封裝好了，下面就是將項目需要的請求接口，還有各個模塊的數據請求方法定義一下，統一放在api.js中，方便維護（ps：如果你的模塊非常多，可以按模塊建立不同的api.js，按需引入）。
詳細代碼如下
const requestFn = require('../requestFn/requestFn');
const API = {
banner:"/web/getBanner.am",//輪播圖
};
const HTTP = {
/**
* banner
* @param {String} userId - 用戶ID
* @param {String} appClientTypeCode - 設備端類型DICT_APP_CLIENT_TYPE_CODE_ANDROID（安卓DICT_APP_CLIENT_TYPE_CODE_IOS（蘋果）
*/
banner(userId, appClientTypeCode){
return requestFn.Request({
url:API.banner,
data:{
userId:userId,
appClientTypeCode:appClientTypeCode,
}
})
},
}
module.exports = HTTP;
4，實際使用
在這幾個步驟之后，我們的一個request的封裝就完成了，接下來就是實際應用了，調用方法如下。
1，在我們的頁面對應的js文件頭部先要引入我們對應的api.js。
import HTTP from "../../requestFn/Api";
2，在Page對象中定義方法
// 獲取banner圖
getBanner () {
let userId = null;
if(app.globalData.userMsg !== null && app.globalData.userMsg.userId) userId = app.globalData.userMsg.userId;
let system = app.globalData.systemInfo.system;
let type = "DICT_APP_CLIENT_TYPE_CODE_IOS";
if(system){
if(!~system.indexOf("iOS")) type = "DICT_APP_CLIENT_TYPE_CODE_ANDROID";
};
HTTP.banner(userId, type)
.then(res => {
this.setData({
bannerList:res.infoObject
});
});
}
以上就是全部內容，如有寫的不對的，歡迎指出。
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁