uniapp如何添加请求拦截器

百变鹏仔 4周前 (11-20) #uniapp

文章标签拦截器

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) =&gt; {            if (func)             {                LsxmRequest[requestBefore] = func            }             else             {                LsxmRequest[requestBefore] = (request) =&gt; request            }        },        response: (func) =&gt; {            if (func)             {                LsxmRequest[requestAfter] = func            }             else             {                LsxmRequest[requestAfter] = (response) =&gt; 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) =&gt; {            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) =&gt; {    if (uni.getStorageSync('token')) {        request.header['token'] = uni.getStorageSync('token');    }    return request})// 响应拦截器lsxmRequest.interceptors.response((response) =&gt; {    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) =&gt; {    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().baseURLApp.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) =&gt; {        console.log(resToken)}

了解更多其他精品文章，敬请关注uni-app栏目~

文章推荐

uniapp如何添加请求拦截器

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项