So implementieren Sie die sekundäre Axios-Kapselung in Vue

In diesem Artikel wird hauptsächlich der Beispielcode für die sekundäre Kapselung von Vue Axios vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und ihn als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Während dieser Zeit habe ich Ihnen die Projektanforderungen mitgeteilt und Vue verwendet.

Als ich mit dem Aufbau des Frameworks begann, habe ich vue-resource verwendet. Später habe ich die offizielle Empfehlung von axios gesehen, also habe ich es auf axios umgestellt und es übrigens gekapselt.

//引入axios
import axios from 'axios'

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
 //发起请求时，取消掉当前正在进行的相同请求
 if (promiseArr[config.url]) {
  promiseArr[config.url]('操作取消')
  promiseArr[config.url] = cancel
 } else {
  promiseArr[config.url] = cancel
 }
  return config
}, error => {
 return Promise.reject(error)
})

//响应拦截器
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

export default {
 //get请求
 get (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'get',
   url,
   params: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
 },
 //post请求
 post (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'post',
   url,
   data: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
  }
 }

Erläuterung

1. Um zu verhindern, dass beim Initiieren einer Anfrage dieselbe Anfrage aktuell gestellt wird, wird dem Anfrage-Interceptor ein Hash-Urteil hinzugefügt, um dieselbe Anfrage-URL abzufangen

2. Extrahieren Sie die öffentlichen Get- und Post-Konfigurationen in Axios. Komm raus

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

3. Kapselung von Get- und Post-Anfragen Sie fragen sich vielleicht, die Axios geben hier das Versprechensobjekt zurück, warum müssen Sie das kapseln? Nochmals versprechen für get und post? Denn was mich betrifft, entwickle ich bei der Verwendung von asynchronem Warten die Datenanforderung. Der gemeldete Fehler ist, dass das zurückgegebene Objekt kein Versprechensobjekt ist. (Ps: Async Await gibt ein Versprechen zurück. Wir werden dieses Problem später besprechen.) Geben Sie einfach ein Versprechensobjekt direkt zurück, um den oben genannten Fehler zu vermeiden. Das Folgende ist ein Beispiel für die Anforderungsschnittstelle

import req from '../api/requestType'
/**
 * 拼团详情
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

Das Folgende ist die Erfassung von Daten

async getData() {
 const params = {
  TopCataID: 0,
  pageNumber: this.pageNumber,
  pageSize: this.pageSize
 }
 const res = await groupList(params)
},

Hier kapseln wir einfach Axios, die für unser eigenes Projekt geeignet sind

Grund für die Kapselung:

1. Sie können den Fehlercode mit dem Backend besprechen und ihn in einer einheitlichen Eingabeaufforderung hier verarbeiten, um unnötigen Ärger zu vermeiden

2 kann hier damit umgehen

Einheitliche Klassifizierung von Schnittstellen:

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 
 
export default ApiSetting

Vorteile der Klassifizierung:

1. Spätere Schnittstellen-Upgrades oder Schnittstellennamensänderungen erleichtern die Wartung

http Rufen Sie an:

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 
 
 } 
} 
</script>

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Detaillierte Interpretation der neuen Funktionen von Angular5.1

Wie man Vue zur Entwicklung von Sudoku-Spielen verwendet

So verwenden Sie Vuex zum Implementieren der Menüverwaltung

Detaillierte Interpretation der mit IE8 kompatiblen Webpack3-Kompilierung (ausführliches Tutorial)

So implementieren Sie es mit JS. Entfernen Sie doppelte JSON-Dateien

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die sekundäre Axios-Kapselung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!