許久不曾寫(xiě)博客文章爬泥，今日回歸柬讨，再次拾起，不以用來(lái)予人參考袍啡，只為記錄那些曾經(jīng)在項(xiàng)目里面碰到過(guò)的實(shí)際問(wèn)題以及解決辦法踩官，記錄下來(lái)，以后可以用作參考境输。
回歸正題
在小程序開(kāi)發(fā)中蔗牡，我們請(qǐng)求后臺(tái)數(shù)據(jù)接口的時(shí)候颖系，屢次要使用小程序的網(wǎng)絡(luò)請(qǐng)求api函數(shù) wx.request ，然后就是一大段的代碼與回調(diào)函數(shù)辩越，非常的不方便代碼復(fù)用和代碼的維護(hù)檢查嘁扼， 因此，我們嘗試來(lái)封裝一個(gè)“數(shù)據(jù)請(qǐng)求層”黔攒。
-
新建一個(gè)專(zhuān)門(mén)用于放置與接口請(qǐng)求有關(guān)的js文件趁啸，并命名為 “api”
不多bb，把代碼貼上如圖督惰。
文件夾內(nèi)容 在index.js里面封裝wxRequest不傅，封裝成為Promise的形式，用于在其他js文件調(diào)用赏胚。
const baseUrl = "www.baidu.com"; //這里以百度為例子访娶，可自行修改接口地址
//通用方法
const wxRequest = (url, method, params) => {
return new Promise((resolve, reject) => {
wx.request({
url: `${baseUrl}${url}`,
data: params,
method: method,
header: {
'wili-access-token': wx.getStorageSync('token'),
},
success: res => {
if (res.statusCode === 200) {
resolve(res);
} else {
reject(res);
}
},
error: error => {
reject(error);
}
});
}).catch(msg => {
console.error(msg);
});
};
module.exports.wxRequest = wxRequest;
代碼的意思是 把 url, method, params 這些會(huì)發(fā)生變化的作為參數(shù)傳入。如果請(qǐng)求成功則會(huì)調(diào)用resolve(res); 并把返回信息res傳入栅哀，如果失敗則會(huì)調(diào)用 reject(error)方法;并把錯(cuò)誤信息傳入。
最后把wxRequest變量導(dǎo)出留拾，因?yàn)樾〕绦蜃裱哪K化方案使用的是commonJS的方案。
- 調(diào)用請(qǐng)求方法
舉個(gè)栗子沦偎，我們?cè)赼pi_user.js 這個(gè)文件內(nèi)調(diào)用剛剛封裝好的wxRequest 豪嚎，如圖谈火。
const api = require('./index.js');
// 用戶相關(guān)api
module.exports.login = params => {
return api.wxRequest('/api/getMiniUserInfo', 'POST', params)
}
// module.exports.saveUserInfo = params => {
// return api.wxRequest('/api/miniRegist', 'POST', params)
// }
module.exports.getUserInfo = params => {
return api.wxRequest('/api/personal', 'GET', params)
}
導(dǎo)入我們剛剛封裝好的index.js文件模塊，由于我們剛剛封裝的是Promise形式的wxRequest 扔字，所以函數(shù)的返回值返回的就是Promise對(duì)象革为，例如舵鳞，
return api.wxRequest('/api/getMiniUserInfo', 'POST', params) 這里就是傳遞請(qǐng)求參數(shù)，當(dāng)請(qǐng)求成功后會(huì)返回wxRequest 的一個(gè)Promise“結(jié)果”對(duì)象抛虏， 這個(gè)結(jié)果對(duì)象由 resolve方法 或者reject方法執(zhí)行后返回的。(不理解Promise的童鞋贺奠，可自行先理解學(xué)習(xí)一下ES6 Promise)错忱。
- 使用封裝好的處理數(shù)據(jù)的api
const { login, getUserInfo } = require("./api/api_user.js");
App({
onLaunch: function() {
// 登錄
wx.login({
success: res => {
this.userLogin(res.code);
}
});
},
// 小程序啟動(dòng)請(qǐng)求登錄接口
userLogin(code) {
login({ code }).then(res => {//調(diào)用的login就是我們上面封裝好的哈
wx.setStorageSync("token", res.data.data);
});
},
globalData: {
userInfo: null
}
});
引入api_user.js 以清，在userLogin函數(shù)里面執(zhí)行的login函數(shù)掷倔，就是我們剛剛經(jīng)過(guò)封裝用作處理接口數(shù)據(jù)的函數(shù)了个绍。傳入它的參數(shù)。在then()里面拿到返回的數(shù)據(jù)res與執(zhí)行回調(diào)函數(shù)處理之后邏輯凛虽。
