How to add request interceptor in uniapp-uni-app-php.cn

How to add request interceptor in uniapp

coldplay.xixi

Release： 2023-01-13 00:44:36

Original

9072 people have browsed it

Uniapp method to add a request interceptor: 1. Define the LsxmRequest class and add the default configuration, interceptor and request method; 2. Subsequently, you need to customize the config and obtain the interface address, and add get and set methods to the class. ;3. Use the Symbol feature to define four private variables to prevent variable pollution.

How to add request interceptor in uniapp

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, DELL G3 computer. This method is suitable for all brands of computers.

Uniapp's method of adding a request interceptor:

1. Use the Symbol feature to define four private variables to prevent variable pollution

const config = Symbol(&#39;config&#39;)
const isCompleteURL = Symbol(&#39;isCompleteURL&#39;)
const requestBefore = Symbol(&#39;requestBefore&#39;)
const requestAfter = Symbol(&#39;requestAfter&#39;)

Copy after login

2. Definition LsxmRequest class and add default configuration, interceptor and request method

class LsxmRequest {
    //默认配置
    [config] = {
        baseURL: &#39;&#39;,
        header: {
            &#39;content-type&#39;: &#39;application/json&#39;
        },
        method: &#39;GET&#39;,
        dataType: &#39;json&#39;,
        responseType: &#39;text&#39;
    }
    //拦截器
    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 = &#39;GET&#39;
        return this.request(options)
    }
    post (url, data, options = {}) {
        options.url = url
        options.data = data
        options.method = &#39;POST&#39;
        return this.request(options)
    }
}

Copy after login

3. Subsequently, you need to customize the config and obtain the interface address. Add get and set methods in the class:

setConfig (func) {
        this[config] = func(this[config])
}
getConfig() {
    return this[config];
}

Copy after login

4. Use The custom plug-in registration method assigns the interface in apis.js (you need to import apis.js in main.js later) to the custom Vue prototype variable $lsxmApi. In order to avoid having to introduce it once on each page, in each page The beforeCreate life cycle of a page is mixed in.

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, &#39;$lsxmApi&#39;, {
        get: function () 
        {
            return Vue._lsxmRequest.apis
        }
    })
}
export default LsxmRequest

Copy after login

5. Instantiate and customize the request configuration items in config.js (add token in the header according to project needs) and interceptor

import LsxmRequest from &#39;./LsxmRequest&#39;
const lsxmRequest = new LsxmRequest()
// 请求拦截器
lsxmRequest.interceptors.request((request) => {
    if (uni.getStorageSync(&#39;token&#39;)) {
        request.header[&#39;token&#39;] = uni.getStorageSync(&#39;token&#39;);
    }
    return request
})
// 响应拦截器
lsxmRequest.interceptors.response((response) => {
    console.log(&#39;beforeRespone&#39;,response);
    // 超时重新登录
    if(response.data.isOverTime){
    uni.showModal({
            title:&#39;提示&#39;,
            content:&#39;您已超时,请重新登录!&#39;,
            showCancel:false,
            icon:&#39;success&#39;,
            success:function(e){
                if(e.confirm){
                    uni.redirectTo({
                        url: &#39;/pages/login/login&#39;
                    })
                }
            }
        }); 
    }
    else
    {
        return response;
    }
})
// 设置默认配置
lsxmRequest.setConfig((config) => {
    config.baseURL = &#39;http://xxxxx.com&#39;
    
    if (uni.getStorageSync(&#39;token&#39;)) {
        config.header[&#39;token&#39;] = uni.getStorageSync(&#39;token&#39;);
    }
    return config;
})
export default lsxmRequest

Copy after login

6. In main.js Introduction, mount apis to Vue

import LsxmRequest from &#39;./service/LsxmRequest.js&#39;
import apis from &#39;./service/apis.js&#39;
import lsxmRequest from &#39;./service/config.js&#39;
Vue.use(LsxmRequest)
Vue.prototype.baseDomain = lsxmRequest.getConfig().baseURL
App.mpType = &#39;app&#39;
const app = new Vue({
    store,
    apis,
    ...App
})
app.$mount()

Copy after login

7. When you need to add an interface, you only need to add the interface in apis.js (the interface in apis.js can be split according to functions later, and the module Management)

import lsxmRequest from &#39;./config.js&#39;
export default{
  apis:{
        //获取验证用户令牌
        getLoginToken(data){
            return lsxmRequest.post(&#39;/xxx/xxx/getLoginToken&#39;, data)
        },
        //登录
        login(data){
            return lsxmRequest.post(&#39;/xxx/xxx/login&#39;, data)
        }
        }
}

Copy after login

8. At this point, you can use

this.$lsxmApi.getLoginToken({}).then((resToken) => {
        console.log(resToken)
}

Copy after login

on the page to learn more about other high-quality articles, please pay attention touni-appColumn~

The above is the detailed content of How to add request interceptor in uniapp. For more information, please follow other related articles on the PHP Chinese website!