13518219792
今天就跟大家聊聊有關怎么在微信小程序中使用wx.request攔截器，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
1.首先了解小程序官方api-wx.request() ，通過示例可以看出wx.request的參數是一個對象，擁有傳輸地址，傳輸內容，響應頭，成功失敗回調函數等屬性和方法，我們可以通過封裝相應的響應頭和成功失敗回調函數達到相應的目的：
// 官方代碼示例
wx.request({
url: 'test.php', //僅為示例，并非真實的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認值
},
success (res) {
console.log(res.data)
}
fail(res){
console.log(res)
}
})2.封裝
封裝請求頭和返回的狀態碼（注：具體頭需要添加哪些屬性，返回的狀態碼處理，是根據與后臺實際溝通所需的參數來制定的）
const app = getApp();
const appid = 'xxxx';
const appSecret = 'xxxxxx';
let ajaxNum = 0;
// 獲取accessToken
function getAccessToken(callback) {
wx.request({
url: '/api/Token',
data: {
appid: aesEncrypt(appid),// aesEncrypt():自定義的用crypto-js.js進行aes加密的方法,這里只需要知道加密了即可，不需要關注此方法
appSecret: aesEncrypt(appSecret),
},
success: function (res) {
if(res.statusCode ===200 && res.data.code === 0) {
let accesstoken = res.data.data.accesstoken;
if (typeof (callback) === 'function' && accesstoken) {
callback(accesstoken);
}
}
},
})
}
// 封裝request請求
const myRequest = options => {
if(options) {
getAccessToken(function (accesstoken){
// header 設置Content-Type，accesstoken, usertoken, noncestr, timestamp等信息，與后臺協商好
if(options.header === undefined || options.header === null) {
options.header = {};
}
options.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
// usertoken在登錄后保存在緩存中，所以從緩存中取出，放在header
let usertoken = wx.getStorageSync('usertoken');
if (usertoken) {
options.header['usertoken'] = usertoken;
}
// 自定義getNoncestr()設置隨機字符串，getTimestamp()獲取時間戳
let noncestr = getNoncestr();
let timestamp = getTimestamp();
// sign進行加密
let sign = getSign(accesstoken, appid, appSecret, noncestr, timestamp);
if (timestamp) {
options.header['timestamp'] = timestamp;
}
if (noncestr) {
options.header['noncestr'] = noncestr;
}
if (sign) {
options.header['sign'] = sign;
}
//url
let baseUrl = config.BASE_HOST;
if (options.url.indexOf('http') != 0) {
options.url = baseUrl + options.url;
}
// method、data
if (options.method === undefined || options.method === null) {
options.method = 'post';
}
if (options.method.toLowerCase() === 'post') {
if(options.data) {
let dataStr = JSON.stringify(options.data);
let base64Str = base64Encrypt(dataStr);
options.data = serializeData({ param: base64Str });
}
}
//success
if (options.success && typeof(options.success) === 'function') {
let successCallback = options.success;
options.success = function(res) {
// 判斷不同的返回碼 200/404
if (res.statusCode === 200) {
try {
// 接收的后臺數據用自定義base64解密方法解密后轉為對象
let str = base64Decrypt(res.data);
let data = JSON.parse(str);
if (parseInt(data.resultCode, 10) === -1) {//后臺商議好的狀態碼，-2未登錄，-1-3后臺出錯
console.error('網絡超時，請稍后重試');
} else if (parseInt(data.resultCode, 10) === -3) {
console.error(data.msg);
} else if (parseInt(data.resultCode, 10) === -2){
console.log("用戶未登錄-ajax");
}
res.data = data;
//調用自定義的success
successCallback(res);
} catch (e) {
console.error('出錯了，' + e + ',接口返回數據:' + res.data);
}
} else if(res.statusCode === 404) {
console.log('404');
}
}
}
//執行微信的請求
wx.request(options);
});
}
}
module.exports = {
myRequest: myRequest頁面調用示范（與wx.request傳參一致）：
const ajax = require('ajax.js');
ajax.javaRequest({
url: '/xxx',
data: {
xxxx: xxx
},
method: 'POST',
success: res => {
console.log(res, '成功')
}
})看完上述內容，你們對怎么在微信小程序中使用wx.request攔截器有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創新互聯行業資訊頻道，感謝大家的支持。
