So fügen Sie einen Anforderungsinterceptor in Uniapp hinzu

So fügen Sie einen Anforderungs-Interceptor in Uniapp hinzu: 1. Definieren Sie die LsxmRequest-Klasse und fügen Sie die Standardkonfiguration, den Interceptor und die Anforderungsmethode hinzu. 2. Anschließend müssen Sie die Konfiguration anpassen, die Schnittstellenadresse abrufen und Get- und Set-Methoden hinzufügen 3. Verwenden Sie die Symbolfunktion, um vier private Variablen zu definieren, um eine variable Verschmutzung zu verhindern.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, DELL G3-Computer. Diese Methode ist für alle Computermarken geeignet.

So fügen Sie einen Anforderungs-Interceptor in Uniapp hinzu:

1. Verwenden Sie die Symbolfunktion, um vier private Variablen zu definieren, um eine Variablenverschmutzung zu verhindern

const config = Symbol('config')
const isCompleteURL = Symbol('isCompleteURL')
const requestBefore = Symbol('requestBefore')
const requestAfter = Symbol('requestAfter')

2. Definieren Sie die LsxmRequest-Klasse und fügen Sie die Standardkonfiguration, den Interceptor und die Anforderungsmethode hinzu

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, Sie müssen die Konfiguration anpassen und die Schnittstellenadresse später abrufen, Get- und Set-Methoden in der Klasse hinzufügen:

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

4. Verwenden Sie die benutzerdefinierte Plug-in-Registrierungsmethode, um apis.js hinzuzufügen (Sie müssen APIs importieren .js in main.js später) Die Schnittstelle wird der benutzerdefinierten Vue-Prototypvariablen $lsxmApi zugewiesen. Um zu vermeiden, dass sie einmal für jede Seite eingeführt wird, wird sie im beforeCreate-Lebenszyklus jeder Seite gemischt.

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. Instanziieren und passen Sie die Anforderungskonfigurationselemente in config.js an (fügen Sie ein Token im Header entsprechend den Projektanforderungen hinzu) und den Interceptor

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. Fügen Sie es in main.js ein und mounten Sie APIs in 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. Wenn Sie eine Schnittstelle hinzufügen müssen, müssen Sie nur die Schnittstelle in apis.js hinzufügen (die Schnittstellen in apis.js können in Zukunft zur modularen Verwaltung nach Funktionen aufgeteilt werden)

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 Seite Sie können

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

verwenden, um mehr über andere Qualitätsartikel zu erfahren. Bitte beachten Sie die Spalte uni-app~

Das obige ist der detaillierte Inhalt vonSo fügen Sie einen Anforderungsinterceptor in Uniapp hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!