前言：
一般前端项目，我们都得考虑接口拦截器封装，好处是代码重用、减少冗余代码、方便后期维护（想象一下错误处理或权限过期代码你写了几十处，需要改个http status code码得改几十处）。下列代码提供了常用的列表、新增、修改、删除、文件上传等方法，和token的处理等。由于之前项目比较赶，所以其实请求回调的代码都是重复冗余的，大家实际使用时，可以稍微调整下，抽取统一的function进行通用。
若需要拷贝代码进行直接使用，记得修改几处位置的代码，一个是状态码得处理，比如成功是200、token过期是401，都是常规的但是每个公司项目可能有差异。还有就是token过期我的跳转路由和你肯定不一致，就得调整。
1、封装request.js通用接口调用方法，达到接口拦截统一处理的效果
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过期，跳到授权页面
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过期，跳到授权页面
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过期，跳到授权页面
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过期，跳到授权页面
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过期，跳到授权页面
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过期，跳到授权页面
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请求，调用用户基本信息的方法。使用时优先需要引入文件方法，由于请求相关的错误代码或者token过期处理，都在公共方法中处理拦截了，所以一般我们不需要关心错误回调进行逻辑处理，当然肯定会有某些特定需求，所以还是提供了错误回调进行扩展。
import { fetchList } from '../../../utils/request.js'
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {},
},
onShow() {
this.getData();
},
getData() {
fetchList('/hs/smallLoginController/getNowUserInto', {}, res => {
this.setData({ userInfo: res.data.result })
},err=>{
// 在这里处理错误逻辑，若需要的话
});
},
})
网友评论