uniapp에 요청 인터셉터를 추가하는 방법

uniapp에 요청 인터셉터를 추가하는 방법: 1. LsxmRequest 클래스를 정의하고 기본 구성, 인터셉터 및 요청 메서드를 추가합니다. 2. 이어서 구성을 사용자 정의하고 인터페이스 주소를 얻은 다음 get 및 set 메서드를 추가해야 합니다. 3. 사용 기호 기능은 변수 오염을 방지하기 위해 4개의 개인 변수를 정의합니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, DELL G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

uniapp에 요청 인터셉터를 추가하는 방법:

1. 변수 오염을 방지하기 위해 기호 기능을 사용하여 4개의 개인 변수를 정의합니다.

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 , 구성을 사용자 정의하고 나중에 인터페이스 주소를 가져와야 합니다. 클래스에 get 및 set 메서드를 추가해야 합니다.

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

4. 사용자 정의 플러그인 등록 방법을 사용하여 apis.js를 추가합니다(apis를 가져와야 함). .js(나중에 main.js의 .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에서 요청 구성 항목을 인스턴스화하고 사용자 정의합니다(프로젝트 필요에 따라 헤더에 토큰 추가). 이를 main.js에 도입하고 API를 Vue

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

7에 탑재합니다. 인터페이스를 추가해야 하는 경우 apis.js에 인터페이스만 추가하면 됩니다. (apis.js의 인터페이스는 모듈 관리를 위해 향후 기능에 따라 분할될 수 있습니다.)

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

8. 페이지

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

를 사용하여 다른 품질의 기사에 대해 자세히 알아볼 수 있습니다.

uni-app 칼럼에 주목해 주세요~

위 내용은 uniapp에 요청 인터셉터를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!