Comment ajouter un intercepteur de requêtes dans Uniapp-uni-app-php.cn

Comment ajouter un intercepteur de requêtes dans Uniapp

coldplay.xixi

Libérer： 2023-01-13 00:44:36

original

9059 Les gens l'ont consulté

Comment ajouter un intercepteur de requêtes à uniapp : 1. Définissez la classe LsxmRequest et ajoutez la configuration par défaut, l'intercepteur et la méthode de requête ; 2. Par la suite, vous devez personnaliser la configuration et obtenir l'adresse de l'interface, et ajouter Méthodes get et set dans la classe ;3. Utilisez la fonctionnalité Symbol pour définir quatre variables privées afin d'éviter la pollution des variables.

Comment ajouter un intercepteur de requêtes dans Uniapp

L'environnement d'exploitation de ce tutoriel : système windows7, version uni-app2.5.1, ordinateur DELL G3 Cette méthode convient à toutes les marques d'ordinateurs.

Comment ajouter un intercepteur de requêtes à uniapp :

1 Utilisez la fonctionnalité Symbole pour définir quatre variables privées afin d'éviter la pollution des variables

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

Copier après la connexion

2. .Définition de la classe LsxmRequest et ajout de la configuration par défaut, de l'intercepteur et de la méthode de requête

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)
    }
}

Copier après la connexion

3. Plus tard, vous devez personnaliser la configuration et obtenir l'adresse de l'interface. Ajouter les méthodes get et set dans la classe :

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

Copier après la connexion

<. 🎜>4. Utilisation La méthode d'enregistrement du plug-in personnalisé attribue l'interface dans apis.js (apis.js doit être importé dans main.js plus tard) à la variable de prototype Vue personnalisée $lsxmApi afin d'éviter d'avoir à l'introduire. une fois sur chaque page, dans chaque page Le cycle de vie beforeCreate d'une page est mélangé.

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

Copier après la connexion

5. Instanciez et personnalisez les éléments de configuration de la requête dans config.js (ajoutez un jeton dans l'en-tête en fonction des besoins du projet) et l'intercepteur

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

Copier après la connexion

6 Dans l'introduction de main.js, montez l'API. à 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()

Copier après la connexion

7. Lorsque vous devez ajouter une interface, il vous suffit d'ajouter l'interface dans apis.js (l'interface dans apis.js peut être divisée en fonction des fonctions à l'avenir, et le module Gestion)

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)
        }
        }
}

Copier après la connexion

8. À ce stade, vous pouvez utiliser

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

Copier après la connexion

pour en savoir plus sur d'autres articles de haute qualité, veuillez faire attention à uni-app colonne~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!