Rumah > Artikel > hujung hadapan web > uniapp如何添加请求拦截器
uniapp添加请求拦截器的方法:1、定义LsxmRequest类并添加默认配置、拦截器与请求方法;2、后续需要自定义config与获取接口地址,在类中添加get和set方法;3、利用Symbol特性定义四个私有变量,防止变量污染。
本教程操作环境:windows7系统、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类并添加默认配置、拦截器与请求方法
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) }
了解更多其他精品文章,敬请关注uni-app栏目~
Atas ialah kandungan terperinci uniapp如何添加请求拦截器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!