uniapp請求攔截

在項目根目錄下新建service文件夾，后續封裝的文件放在這個文件夾下。

 

image.png

主要的封裝是在LsxmRequest.js中，配置項在config.js中，api.js為接口的統一管理文件，項目接口增多時，可以考慮按照功能塊對api.js進行進一步划分成多個模塊，最后import到api.js中。
1、利用Symbol特性定義四個私有變量，防止變量污染

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、后續需要自定義config與獲取接口地址，在類中添加get和set方法：

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

4、用自定義插件注冊的方法將apis.js（后續在main.js中需要導入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中實例化並自定義請求配置項(此處根據項目需要在頭部加入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 }) // 響應攔截器 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、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中添加接口即可(后續可將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) }