1鳖目，前言
在開發(fā)微信小程序的過程中，避免不了和服務(wù)端請求數(shù)據(jù)缤弦，微信小程序給我們提供了wx.request這個API领迈，調(diào)用方法如下
wx.request({
url: 'www.baidu.com', //僅為示例，并非真實的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認值
},
success (res) {
console.log(res.data)
}
});
作為一個合格的前端開發(fā)碍沐，為了代碼質(zhì)量和優(yōu)雅度（其實是因為懶）狸捅，避免不了封裝一些重復(fù)代碼和功能，來使開發(fā)過程更加酣暢淋漓累提。
2尘喝，實現(xiàn)思路
項目中，wx.request的很多參數(shù)都是固定的斋陪，只需要改變data的值朽褪，而一般我們的邏輯處理都是在wx.request的回調(diào)success，fail和complete中操作的鳍贾，并且有部分邏輯也是相同的鞍匾，（比如判斷接口返回數(shù)據(jù)是否成功，根據(jù)成功或失敗顯示不同的提示框等等）骑科，所以博主在這邊用了Promise來做了一個鏈式調(diào)用封裝橡淑，少去了大部分重復(fù)語句。
3咆爽，實現(xiàn)過程
首先我們需要創(chuàng)建一個公共的requestFn.js文件梁棠，在這個文件中寫我們的wx.request的封裝，然后還需要創(chuàng)建一個公共的Api.js文件斗埂，這個里面存放我們的接口地址和自定義的function符糊，最后，在微信小程序根目錄下的app.js中找到globalData呛凶，在里面寫上項目常用的請求域名男娄，具體的如下圖。
目錄結(jié)構(gòu)
app.js
3.1，request的封裝
在requestFn.js中模闲，我們要做到的是創(chuàng)建一個function建瘫，在里面統(tǒng)一處理wx.request需要的參數(shù)和返回值，還有請求過程中的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("網(wǎng)絡(luò)開小差了");
reject(res);
}
})
})
};
module.exports = {
Request
};
其中的FN橄浓，FN.Toast還有FN.Loading是博主自己二次封裝的一些微信小程序API，可以參考博主的另一篇文章：微信小程序API交互的自定義封裝
3.2亮航，api的封裝
request已經(jīng)封裝好了荸实，下面就是將項目需要的請求接口，還有各個模塊的數(shù)據(jù)請求方法定義一下缴淋，統(tǒng)一放在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 - 設(shè)備端類型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的封裝就完成了沦辙，接下來就是實際應(yīng)用了，調(diào)用方法如下讹剔。
1油讯，在我們的頁面對應(yīng)的js文件頭部先要引入我們對應(yīng)的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
});
});
}
以上就是全部內(nèi)容陌兑，如有寫的不對的，歡迎指出由捎。
如果看了覺得有幫助的兔综，我是@上進的鵬多多，歡迎 點贊 關(guān)注 評論狞玛；
END
往期文章
個人主頁
