前言：
一般前端項(xiàng)目饲化，我們都得考慮接口攔截器封裝，好處是代碼重用吗伤、減少冗余代碼吃靠、方便后期維護(hù)（想象一下錯誤處理或權(quán)限過期代碼你寫了幾十處，需要改個http status code碼得改幾十處）足淆。下列代碼提供了常用的列表巢块、新增、修改巧号、刪除族奢、文件上傳等方法，和token的處理等丹鸿。由于之前項(xiàng)目比較趕歹鱼，所以其實(shí)請求回調(diào)的代碼都是重復(fù)冗余的，大家實(shí)際使用時卜高，可以稍微調(diào)整下弥姻，抽取統(tǒng)一的function進(jìn)行通用。
若需要拷貝代碼進(jìn)行直接使用掺涛，記得修改幾處位置的代碼庭敦，一個是狀態(tài)碼得處理，比如成功是200薪缆、token過期是401秧廉，都是常規(guī)的但是每個公司項(xiàng)目可能有差異。還有就是token過期我的跳轉(zhuǎn)路由和你肯定不一致拣帽，就得調(diào)整疼电。
1、封裝request.js通用接口調(diào)用方法减拭，達(dá)到接口攔截統(tǒng)一處理的效果
var app = getApp();
const baseUrl = 'https://test/api.com';
// 獲取列表
const fetchList = (url, data, callback, errCallback) => {
let token = wx.getStorageSync('token')
wx.showLoading();
wx.request({
url: baseUrl + url,
header: {
'X-Access-Token': token,
},
method: 'GET',
data: data,
success: function (res) {
wx.hideLoading();
// token過期蔽豺，跳到授權(quán)頁面
if (res.data.code === 401) {
wx.reLaunch({
url: '/pages/basicFunction/login/login'
})
return;
}
if (res.data.code !== 200) {
if (errCallback){
return errCallback(res);
}
wx.showToast({
title: res.data.message,
icon: 'none'
});
return;
}
callback(res);
}
})
}
// 獲取詳情
const fetchDetail = (url, data, callback, errCallback) => {
wx.showLoading();
let token = wx.getStorageSync('token')
wx.request({
url: baseUrl + url,
header: {
'X-Access-Token': token,
},
method: 'GET',
data: data,
success: function (res) {
wx.hideLoading();
// token過期，跳到授權(quán)頁面
if (res.data.code === 401) {
wx.reLaunch({
url: '/pages/basicFunction/login/login'
})
return;
}
if (res.data.code !== 200) {
if (errCallback) {
return errCallback(res);
}
wx.showToast({
title: res.data.message,
icon: 'none'
});
return;
}
callback(res);
}
})
}
// 新增
const fetchAdd = (url, data, callback, errCallback, hide) => {
!hide && wx.showLoading();
let token = wx.getStorageSync('token')
wx.request({
url: baseUrl + url,
header: {
'X-Access-Token': token
},
method: 'POST',
data: data,
success: function (res) {
wx.hideLoading();
// token過期拧粪，跳到授權(quán)頁面
if (res.data.code === 401) {
wx.reLaunch({
url: '/pages/basicFunction/login/login'
})
return;
}
if (res.data.code !== 200) {
if (errCallback) {
return errCallback(res);
}
wx.showToast({
title: res.data.message,
icon: 'none'
});
return;
}
callback(res);
}
})
}
// 修改
const fetchUpdate = (url, data, callback, errCallback) => {
wx.showLoading();
let token = wx.getStorageSync('token')
wx.request({
url: baseUrl + url,
header: {
'X-Access-Token': token,
},
method: 'PUT',
data: data,
success: function (res) {
wx.hideLoading();
// token過期修陡，跳到授權(quán)頁面
if (res.data.code === 401) {
wx.reLaunch({
url: '/pages/basicFunction/login/login'
})
return;
}
if (res.data.code !== 200) {
if (errCallback) {
return errCallback(res);
}
wx.showToast({
title: res.data.message,
icon: 'none'
});
return;
}
callback(res);
}
})
}
// 刪除
const fetchDelete = (url, data, callback, errCallback) => {
wx.showLoading();
let token = wx.getStorageSync('token')
wx.request({
url: baseUrl + url,
header: {
'X-Access-Token': token
},
method: 'DELETE',
data: data,
success: function (res) {
wx.hideLoading();
// token過期，跳到授權(quán)頁面
if (res.data.code === 401) {
wx.reLaunch({
url: '/pages/basicFunction/login/login'
})
return;
}
if (res.data.code !== 200) {
if (errCallback) {
return errCallback(res);
}
wx.showToast({
title: res.data.message,
icon: 'none'
});
return;
}
callback(res);
}
})
}
// 文件上傳
const fetchUpload = (data, callback, errCallback) => {
let token = wx.getStorageSync('token')
wx.showLoading();
wx.uploadFile({
url: baseUrl+'/hs/sys/common/uploadOss',
filePath: data.filePath,
name: 'file',
header: {
'X-Access-Token': token,
},
success(res) {
let data = JSON.parse(res.data)
wx.hideLoading();
// token過期可霎，跳到授權(quán)頁面
if (data.code === 401) {
wx.reLaunch({
url: '/pages/basicFunction/login/login'
})
return;
}
if (data.code !== 200) {
if (errCallback) {
return errCallback(res);
}
wx.showToast({
title: res.data.message,
icon: 'none'
});
return;
}
callback(data);
}
})
}
module.exports = {
fetchList: fetchList,
fetchAdd: fetchAdd,
fetchUpdate: fetchUpdate,
fetchDetail: fetchDetail,
fetchDelete: fetchDelete,
fetchUpload: fetchUpload
}
2魄鸦、使用方式及說明
下面的代碼建議演示了使用get請求，調(diào)用用戶基本信息的方法癣朗。使用時優(yōu)先需要引入文件方法拾因，由于請求相關(guān)的錯誤代碼或者token過期處理，都在公共方法中處理攔截了，所以一般我們不需要關(guān)心錯誤回調(diào)進(jìn)行邏輯處理绢记，當(dāng)然肯定會有某些特定需求扁达，所以還是提供了錯誤回調(diào)進(jìn)行擴(kuò)展。
import { fetchList } from '../../../utils/request.js'
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
userInfo: {},
},
onShow() {
this.getData();
},
getData() {
fetchList('/hs/smallLoginController/getNowUserInto', {}, res => {
this.setData({ userInfo: res.data.result })
},err=>{
// 在這里處理錯誤邏輯庭惜，若需要的話
});
},
})
