Zusammenfassung der Änderungen bei der Verwendung von Axios in den Studiennotizen zu Vue3

Bevor Sie Axios verwenden, müssen Sie es zuerst installieren.

Garn hinzufügen Axios
 
npm installiere Axios
 
Bower installiert Axios
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Die vier oben genannten Installationsmethoden können entsprechend dem von Ihnen erstellten Projekt ausgewählt werden.

1. Grundlegende Verwendung von axio

Erstellen Sie zunächst eine Komponente und importieren Sie Axios, um zu testen, ob der Import erfolgreich ist! Schreiben Sie den folgenden Code:

Axios von „Axios“ importieren
importiere { onMounted } von "vue"
Standard exportieren {
 aufstellen(){
  beim Montieren(()=>{
   axios({
    URL: 'https://xxxxxx.net/hj/mp/banner/l'
   })
  })
 }
}

onMounted ist eine Lifecycle-Hook-Funktion. Wenn die Seite geladen wird, wird diese Netzwerkanforderung aufgerufen. Die Axios-Methode legt die Netzwerkanforderungsmethode nicht fest. Der Standard ist eine GET-Anfrage.

Als ich den Dienst öffnete und die Netzwerkanforderung überprüfte, stellte ich fest, dass die Anforderung fehlgeschlagen war:

Fehlerinhalt: Der Zugriff auf XMLHttpRequest unter „https://xxxxx/hj/mp/banner/l“ vom Ursprung „http://localhost:3000“ wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden.

Es weist auf ein domänenübergreifendes Problem hin.

2. Wie löst man domänenübergreifende Probleme?

Verwenden Sie einen Proxy, um dieses Problem zu lösen, erstellen Sie eine neue Datei vue.config.js und fügen Sie die Konfiguration hinzu:

module.exports={
 devServer:{
  Proxy: {
   '/api':{
    Ziel: 'https://xxxxx.net',
    changeOrigin:true,
    PfadUmschreiben:{
     '^/api':''
    }
   }
  }
 }
}

Es ist peinlich, wenn ich die Seite aktualisiere, um den Effekt zu überprüfen. Die angeforderte Adresse ist völlig korrekt, aber es wird immer wieder die Meldung „404-Adresse nicht gefunden“ angezeigt.

Das Projekt in vue2 hat eine normale Anforderung, in vue3 jedoch eine 404.

Fügen Sie bei der Netzwerkanforderung eine globale Konfiguration hinzu und löschen Sie den Domänennamen in der URL der Anforderung.

axios.defaults.baseURL = "/api"
axios.defaults.headers.post['Inhaltstyp'] = 'Anwendung/json'
 axios({
  URL: '/hj/mp/banner/l'
})

Nachdem die Änderung abgeschlossen ist, ist die Netzwerkanforderung zum Aktualisieren der Seite erfolgreich.

3. Verpackung

Ich habe noch nie eine Bibliothek von Drittanbietern verwendet. Am meisten wird darüber gesprochen, wie man sie kapselt und wie man sie nach der Kapselung verwendet. Ist es nicht besser, sie direkt zu verwenden?

Ich sage dir ganz deutlich, dass du noch zu jung bist … du wirst dich daran erinnern, nachdem du noch ein paar weitere Verluste erlitten hast. Der größte Vorteil der Kapselung besteht darin, dass Sie bei einem Fehler im Framework eines Drittanbieters oder bei Änderungen am Drittanbieter nur eine einzige Stelle ändern müssen, um die Änderung abzuschließen. Es ist leicht zu warten, hat einen geringen Arbeitsaufwand und kann nicht leicht übersehen werden.

Da es viele Axios-Anforderungsmethoden gibt, kann es mehrere Arten der Kapselung geben.

Methode 1:

Axios von „Axios“ importieren
 
//Globale Konfiguration axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
//Abfangjäger axios.interceptors.request.use(config=>{
 Konfiguration zurückgeben
},Fehler=>{
 returniere Promise.error(Fehler)
})
axios.interceptors.response.use(Antwort=>{
 Antwortdaten zurückgeben
},Fehler=>{
 returniere Promise.error(Fehler)
})
 
Exportfunktionsanforderung (URL = "", Params = {}, Typ = "POST") {
 //Legen Sie den Standardwert des URL-Parametertyps fest return new Promise((resolve,reject)=>{
  lass versprechen
  wenn(Typ.toUpperCase()==='GET'){
   Versprechen = Axios ({
    URL (URL = URL = URL),
    Parameter
   })
  }sonst wenn( Typ.toUpperCase()=== 'POST' ){
   Versprechen = Axios ({
    Methode: 'POST',
    URL (URL = URL = URL),
    Daten:Parameter
  })
  }
    //Verarbeitung return promise.then(res=>{
   Entschlossenheit (res)
  }).catch(err=>{
   ablehnen (Fehler)
  })
 })
}
 
//Rufen Sie import {request} from '../network/request.js' auf, wenn Sie
Standard exportieren {
 montiert(){
  Anfrage('/hj/mp/banner/l').dann(res=>{
   konsole.log(res);
  }).catch(err=>{
   console.log(fehler);
  })
 }
}

Da axios selbst ein Promise-Objekt zurückgibt, müssen wir kein Promise-Objekt für die äußere Schicht instanziieren, was die Kapselung vereinfacht.

Methode 2:

Axios von „Axios“ importieren
 
//Globale Konfiguration axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
Exportfunktionsanforderung (Konfiguration) {
 const instace = axios.create({
  Zeitüberschreitung: 50000,
  Methode: „posten“
 })
 
  //Abfangen der Anforderung instace.interceptors.request.use(config=>{
  Konfiguration zurückgeben
 },err=>{})
 //Antwortabfangen instace.interceptors.response.use(res=>{
  Rückgabewert.Daten
 },err=>{
  // Fehlerbehandlung })
 returniere Instanz(Konfiguration)
}
// Rufen Sie import {request} von './request' auf, wenn Sie
Anfrage({
 URL: '/hj/mp/banner/l',
}).dann(res=>{
 konsole.log(res);
}).catch(err=>{
 console.log(fehler);
})

Es gibt viele Möglichkeiten, Axios zu kapseln. Wenn Sie interessiert sind, können Sie das Axios-Dokument aufrufen, um mehr zu erfahren und selbst zu versuchen, eines zu kapseln, oder es speichern und direkt kopieren, um es in Zukunft zu verwenden, ohne es kapseln zu müssen.

4. Globale Bezugnahme auf Axios

Auf die oben gekapselte Anforderungsmethode kann global verwiesen werden, sodass sie in jeder Datei im Projekt verwendet werden kann.

Globale Eigenschaften in main.js hinzufügen

const app = createApp(App)
app.config.globalProperties.$http = Anfrage
app.mount('#app')

Die Reihenfolge der oben genannten drei kann nicht angepasst werden!

Bei Verwendung innerhalb einer Komponente:

importiere { defineComponent, getCurrentInstance ,onMounted } von "vue"
exportiere Standard-DefineComponent ({
 setup(Requisiten, ctx){
  const { proxy } = getCurrentInstance()
  beim Montieren(()=>{
   Konsole.log(Proxy);
   Proxy.$http('/hj/mp/banner/l').then(res=>{
    konsole.log(res);
   })
  })
 }
})

Herzlichen Glückwunsch, dass Sie es bis zum Ende geschafft haben. Dies ist das Einzige, was sich bei der Verwendung von Axios in Vue3 geändert hat.

Dies ist das Ende dieses Artikels über die Änderungen bei der Verwendung von Axios in den Vue3-Lernnotizen. Weitere Vue3-bezogene Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!