微信小程序api攔截器
發(fā)布時間：2018-05-29 11:20 所屬欄目：小程序開發(fā)教程
微信小程序api攔截器
npm install wxapp-api-interceptors --savempvue 等項目 import wxApiInterceptors from 'wxapp-api-interceptors'; wxApiInterceptors(); // 必須在調(diào)用小程序api之前調(diào)用 原生小程序項目 下載該項目，解壓移動文件夾dist里wxApiInterceptors.js和runtime.js文件到你自己的項目，詳見示例。
const wxApiInterceptors = require('./wxApiInterceptors');
wxApiInterceptors(); // 必須在調(diào)用小程序api之前調(diào)用
小程序api調(diào)用
不必傳success、complete和fail參數(shù)。
wx.showLoading({title: '登錄中...'})
.then(wx.login)
.then(data => wx.request.post('/login', {data}))
.then(() => wx.showToast({title: '登錄成功'}))
.catch(() => wx.showToast({title: '登錄失敗'}))
.finally(wx.hideLoading);
也兼容原生的調(diào)用方式（不便維護(hù)）：
wx.showLoading({
title: '登錄中...',
success: () => {
wx.login({
success: (data) => {
wx.request({
url: '/login',
data,
success: () => wx.showToast({title: '登錄成功'}),
fail: () => wx.showToast({title: '登錄失敗'}),
complete: wx.hideLoading,
});
},
});
},
});
自定義攔截器
使用方法及參數(shù)：wxApiInterceptors({[api]: {[request](params):params, [response](res):res}})比如攔截wx.showModal的confirmColor默認(rèn)值為red，調(diào)用成功后并攔截調(diào)用成功返回的結(jié)果。
wxApiInterceptors({
showModal: {
request(params) {
if (params.confirmColor === undefined) {
params.confirmColor = 'red';
}
return params;
},
response(res) {
res = '調(diào)用成功';
return res;
},
}
});
wx.showModal({title: '測試'})
.then(console.log);
// 控制的輸出：調(diào)用成功
默認(rèn)攔截了request api，封裝成了和axios差不多的使用方式
調(diào)用wx.request[method](url, [config])發(fā)送axios化的請求。
wx.request('https://test.com/banner')
.then(({data}) => {
console.log(data);
})
其他請求方式
wx.request.post('https://test.com', {data: {userName: 'test'}})
.then(({data}) => {
console.log(data);
})
當(dāng)然也可以再繼續(xù)攔截request api
比如設(shè)置request api默認(rèn)的host：
wxApiInterceptors({
request: {
request(params) {
const host = 'https://test.com'
if (!/^(http|\/\/)/.test(params.url)) {
params.url = host + params.url;
}
return params;
},
},
});
甚至可以攔截自己的業(yè)務(wù)狀態(tài)碼：
wxApiInterceptors({
request: {
response(res) {
const {data: {code}} = res;
// 如果data里的code等于-1就響應(yīng)為失敗
if (code === -1) {
return Promise.reject(res);
}
return res;
},
},
});
強大的async攔截器
比如調(diào)用request api的時候都在header里帶上本地儲存的token，沒有的話從服務(wù)器獲?。?/p>
wxApiInterceptors({
request: {
async request(params) {
if (params.header === undefined) {
params.header = {};
}
let token = wx.getStorageSync('token');
if (!token) {
({data: token} = await wx.request('/getToken'));
wx.setStorageSync('token', token);
}
params.header.token = token;
return params;
},
},
});
原生小程序項目使用async需要特殊處理，請看示例。 |
