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 중국어 웹사이트의 기타 관련 기사를 참조하세요!