uniapp如何添加請求攔截器

uniapp添加請求攔截器的方法：1、定義LsxmRequest類并添加默認(rèn)配置、攔截器與請求方法；2、后續(xù)需要自定義config與獲取接口地址，在類中添加get和set方法；3、利用Symbol特性定義四個私有變量，防止變量污染。

本教程操作環(huán)境：windows7系統(tǒng)、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類并添加默認(rèn)配置、攔截器與請求方法

class LsxmRequest {     //默認(rèn)配置     [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、后續(xù)需要自定義config與獲取接口地址，在類中添加get和set方法：

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

4、用自定義插件注冊的方法將apis.js（后續(xù)在main.js中需要導(dǎo)入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中實例化并自定義請求配置項(此處根據(jù)項目需要在頭部加入token)與攔截器

import LsxmRequest from './LsxmRequest' const lsxmRequest = new LsxmRequest() // 請求攔截器 lsxmRequest.interceptors.request((request) => {     if (uni.getStorageSync('token')) {         request.header['token'] = uni.getStorageSync('token');     }     return request }) // 響應(yīng)攔截器 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;     } }) // 設(shè)置默認(rèn)配置 lsxmRequest.setConfig((config) => {     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().baseURL App.mpType = 'app' const app = new Vue({     store,     apis,     ...App }) app.$mount()

7、需要添加接口時，只需在apis.js中添加接口即可(后續(xù)可將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) => {         console.log(resToken) }

了解