uniapp添加请求拦截器的方法：1、定义lsxmrequest类并添加默认配置、拦截器与请求方法；2、后续需要自定义config与获取接口地址，在类中添加get和set方法；3、利用symbol特性定义四个私有变量，防止变量污染。
本教程操作环境：windows7系统、uni-app2.5.1版本，DELL G3电脑，该方法适用于所有品牌电脑。
uniapp添加请求拦截器的方法：
1、利用Symbol特性定义四个私有变量，防止变量污染
const config = Symbol('config')
const isCompleteURL = Symbol('isCompleteURL')
const requestBefore = Symbol('requestBefore')
const requestAfter = Symbol('requestAfter')
2、定义LsxmRequest类并添加默认配置、拦截器与请求方法
class LsxmRequest {
//默认配置
[config] = {
baseURL: '',
header: {
'content-type': 'application/json'
},
method: 'GET',
dataType: 'json',
responseType: 'text'
}
//拦截器
interceptors = {
request: (func) => {
if (func)
{
LsxmRequest[requestBefore] = func
}
else
{
LsxmRequest[requestBefore] = (request) => request
}
},
response: (func) => {
if (func)
{
LsxmRequest[requestAfter] = func
}
else
{
LsxmRequest[requestAfter] = (response) => response
}
}
}
static [requestBefore] (config) {
return config
}
static [requestAfter] (response) {
return response
}
static [isCompleteURL] (url) {
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
}
request (options = {}) {
options.baseURL = options.baseURL || this[config].baseURL
options.dataType = options.dataType || this[config].dataType
options.url = LsxmRequest[isCompleteURL](options.url) ? options.url : (options.baseURL + options.url)
options.data = options.data
options.header = {...options.header, ...this[config].header}
options.method = options.method || this[config].method
options = {...options, ...LsxmRequest[requestBefore](options)}
return new Promise((resolve, reject) => {
options.success = function (res) {
resolve(LsxmRequest[requestAfter](res))
}
options.fail= function (err) {
reject(LsxmRequest[requestAfter](err))
}
uni.request(options)
})
}
get (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
}
post (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
}
}
3、后续需要自定义config与获取接口地址，在类中添加get和set方法：
setConfig (func) {
this[config] = func(this[config])
}
getConfig() {
return this[config];
}
4、用自定义插件注册的方法将apis.js（后续在main.js中需要导入apis.js）中的接口赋到自定义的Vue原型变量$lsxmApi上，为了避免每个页面都要引入一次，在每个页面的beforeCreate生命周期混入。
LsxmRequest.install = function (Vue) {
Vue.mixin({
beforeCreate: function ()
{
if (this.$options.apis)
{
console.log(this.$options.apis)
Vue._lsxmRequest = this.$options.apis
}
}
})
Object.defineProperty(Vue.prototype, '$lsxmApi', {
get: function ()
{
return Vue._lsxmRequest.apis
}
})
}
export default LsxmRequest
5、在config.js中实例化并自定义请求配置项(此处根据项目需要在头部加入token)与拦截器
import LsxmRequest from './LsxmRequest'
const lsxmRequest = new LsxmRequest()
// 请求拦截器
lsxmRequest.interceptors.request((request) => {
if (uni.getStorageSync('token')) {
request.header['token'] = uni.getStorageSync('token');
}
return request
})
// 响应拦截器
lsxmRequest.interceptors.response((response) => {
console.log('beforeRespone',response);
// 超时重新登录
if(response.data.isOverTime){
uni.showModal({
title:'提示',
content:'您已超时,请重新登录!',
showCancel:false,
icon:'success',
success:function(e){
if(e.confirm){
uni.redirectTo({
url: '/pages/login/login'
})
}
}
});
}
else
{
return response;
}
})
// 设置默认配置
lsxmRequest.setConfig((config) => {
config.baseURL = 'http://xxxxx.com'
if (uni.getStorageSync('token')) {
config.header['token'] = uni.getStorageSync('token');
}
return config;
})
export default lsxmRequest
6、main.js中引入，将apis挂载到Vue上
import LsxmRequest from './service/LsxmRequest.js'
import apis from './service/apis.js'
import lsxmRequest from './service/config.js'
Vue.use(LsxmRequest)
Vue.prototype.baseDomain = lsxmRequest.getConfig().baseURL
App.mpType = 'app'
const app = new Vue({
store,
apis,
...App
})
app.$mount()
7、需要添加接口时，只需在apis.js中添加接口即可(后续可将apis.js中的接口按照功能拆分，模块化管理)
import lsxmRequest from './config.js'
export default{
apis:{
//获取验证用户令牌
getLoginToken(data){
return lsxmRequest.post('/xxx/xxx/getLoginToken', data)
},
//登录
login(data){
return lsxmRequest.post('/xxx/xxx/login', data)
}
}
}
8、至此,页面中即可使用
this.$lsxmApi.getLoginToken({}).then((resToken) => {
console.log(resToken)
}
了解更多其他精品文章，敬请关注uni-app栏目~
