小程序 之 ajax 封裝 與 相似cookie 用戶憑證模擬
思路:
剛作小程序時,發現 要用 wx.request 去向服務器獲取數據:
用法:php
wx.request({ url: 'test.php', //僅爲示例,並不是真實的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默認值 }, success: function(res) { console.log(res.data) } })
1.不可能在每一個頁面,去調用 低級版本的wx.reuqest 方法, 爲 每一個方法 再配置 header等等。
這樣作不便於維護,因此爲了維護統一的一個獲取服務器數據的方法,把wx.request封裝一層,把公共的header和其餘配置信息放到裏面。
2.爲了解決 地獄回調問題(即success 裏 再調用 wx.request),因此採用 加一層Promise 封裝,讓它以鏈式調用。
3.用戶登錄憑證信息能夠放在header頭裏面, 或者還能夠直接放在 data。具體靠本身選擇(
Object.assign(header, {authheader: '登錄憑證'})
或者
Object.assign(data, {authheader: '登錄憑證'})
), 我採用第一種方式。
// common/index.jsajax
// 函數代碼 存儲憑證信息 const {AUTHHEADER} = require('../config'); // 獲取 憑證 module.exports.getAuthMsg = () => { // 原始信息 let {loseTime, authMsg} = wx.getStorageSync(AUTHHEADER) || {}; loseTime = parseInt(loseTime); if (loseTime) { // 未失效 if (loseTime > (new Date()).getTime() && authMsg) { return authMsg } } wx.removeStorageSync(AUTHHEADER) return ''; }; // 設置憑證 module.exports.setAuthMsg = (authMsg) => { let loseTime = (new Date()).getTime() + (60 * 60 * 1000 * 24) * 15; wx.setStorageSync(AUTHHEADER,{ authMsg, loseTime }) };
// ajax.jsjson
const { getAuthMsg} = require('../common/index.js'); module.exports = ({ url, header = {}, data, method = 'POST', }) => { return new Promise((r, j) => { // 獲取用戶信息 const authHeader = getAuthMsg(); // 包裝header header = Object.assign({ // ajax 模擬頭部 'X-Requested-With': 'XMLHttpRequest', // 傳輸數據格式 'Content-Type': 'application/x-www-form-urlencoded', // 鑑權信息 相似於cookie 'authheader': authHeader, }, header); url = `${baseDomain}/${url}`; wx.request({ url, method, header, data, success (res) { let { data: { data, flag, msg, code } } = res; // 返回信息正常 if (flag === 1) { return r({data}) } // 對應---報錯信息 switch (code) { case '***1': { r({ msg, code }) break; } case '***2': { r({msg, code}); break; } case '***3' : { r({msg, code}); break; } default: { j({ msg, res}) } } }, fail (e) { j({ msg: "網絡錯誤" }); } }) }) }