小程式開發-資料請求層的封裝
許久不曾寫部落格文章，今日迴歸，再次拾起，不以用來予人蔘考，只為記錄那些曾經在專案裡面碰到過的實際問題以及解決辦法，記錄下來，以後可以用作參考。
迴歸正題
在小程式開發中，我們請求後臺資料介面的時候，屢次要使用小程式的網路請求api函式 wx.request ，然後就是一大段的程式碼與回撥函式，非常的不方便程式碼複用和程式碼的維護檢查， 因此，我們嘗試來封裝一個“資料請求層”。
-
新建一個專門用於放置與介面請求有關的js檔案，並命名為 “api”
不多bb，把程式碼貼上如圖。
資料夾內容
-
在index.js裡面封裝wxRequest，封裝成為Promise的形式，用於在其他js檔案呼叫。
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 這些會發生變化的作為引數傳入。如果請求成功則會呼叫resolve(res); 並把返回資訊res傳入，如果失敗則會呼叫 reject(error)方法;並把錯誤資訊傳入。
最後把wxRequest變數匯出，因為小程式遵循的模組化方案使用的是commonJS的方案。
-
呼叫請求方法
舉個栗子，我們在api_user.js 這個檔案內呼叫剛剛封裝好的wxRequest ，如圖。
const api = require('./index.js');
//使用者相關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)
}
匯入我們剛剛封裝好的index.js檔案模組，由於我們剛剛封裝的是Promise形式的wxRequest ，所以函式的返回值返回的就是Promise物件，例如，
return api.wxRequest('/api/getMiniUserInfo', 'POST', params) 這裡就是傳遞請求引數，當請求成功後會返回wxRequest 的一個Promise“結果”物件， 這個結果物件由 resolve方法 或者reject方法執行後返回的。(不理解Promise的童鞋，可自行先理解學習一下ES6 Promise)。
- 使用封裝好的處理資料的api
const { login, getUserInfo } = require("./api/api_user.js");
App({
onLaunch: function() {
// 登入
wx.login({
success: res => {
this.userLogin(res.code);
}
});
},
// 小程式啟動請求登入介面
userLogin(code) {
login({ code }).then(res => {//呼叫的login就是我們上面封裝好的哈
wx.setStorageSync("token", res.data.data);
});
},
globalData: {
userInfo: null
}
});
引入api_user.js ，在userLogin函式裡面執行的login函式，就是我們剛剛經過封裝用作處理介面資料的函數了。傳入它的引數。在then()裡面拿到返回的資料res與執行回撥函式處理之後邏輯。