Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

1. Laden Sie das Axios-Plugin herunter

cnpm installiere axios -S

2. Axios in main.js einführen

Axios von „Axios“ importieren
Vue.prototype.$http = axios

3. Erstellen Sie eine Axios-Instanz

let service = axios.create({
    baseURL: baseUrl, // URL = Basis-API-URL + Anforderungs-URL
    withCredentials: true, // sende Cookies bei domänenübergreifenden Anfragen
    Timeout: 5000 // Anforderungs-Timeout
})

4. Abfangen von Anfragen

lass laden;
// Anforderungsabfangen service.interceptors.request.use(config => {
 
    // starte die Ladeanimation loading = Toast.loading({
        Dauer: 10000,
        Meldung: „Wird geladen …“,
        forbidClick:true,
    })
    //config.headers['Autorisierung'] = sessionStorage.getItem('Token')
    Konfiguration zurückgeben
},Fehler =>{
    konsole.log(Fehler);
    returniere Promise.reject(Fehler)
})

5. Antwortabfang

// Antwortabfangen service.interceptors.response.use(res =>{
    // Laden löschen
    wird geladen.löschen()
    gibt Promise.resolve(res) zurück
},Fehler =>{
    wird geladen.löschen()
    Konsole.log('err'+Fehler);
    returniere Promise.reject(Fehler)
})

6. Werfen

// Throw export default service

Vollständiger Code

// Datei importierenimport axios von „axios“
importiere {baseUrl} aus '@/config'
importiere {Toast} von 'vant'
 
// Grundkonfiguration let service = axios.create({
    baseURL: baseUrl, // URL = Basis-API-URL + Anforderungs-URL
    withCredentials: true, // sende Cookies bei domänenübergreifenden Anfragen
    Timeout: 5000 // Anforderungs-Timeout
})
 
lass laden;
// Anforderungsabfangen service.interceptors.request.use(config => {
 
    // starte die Ladeanimation loading = Toast.loading({
        Dauer: 10000,
        Meldung: „Wird geladen …“,
        forbidClick:true,
    })
    //config.headers['Autorisierung'] = sessionStorage.getItem('Token')
    Konfiguration zurückgeben
},Fehler =>{
    konsole.log(Fehler);
    returniere Promise.reject(Fehler)
})
 
 
// Antwortabfangen service.interceptors.response.use(res =>{
    // Laden löschen
    wird geladen.löschen()
    gibt Promise.resolve(res) zurück
},Fehler =>{
    wird geladen.löschen()
    Konsole.log('err'+Fehler);
    returniere Promise.reject(Fehler)
})
 
// Throw export default service

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Installations- und Verpackungsfälle von JavaScript Axios. Weitere relevante Inhalte zur Installation und Verpackung von JS Axios finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detaillierte Analyse von Homologie und Domänenübergreifendkeit, JSONP (Funktionskapselung), CORS-Prinzip
Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten
Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten
Native JS-Kapselung, nahtlose Karussellfunktion
Native JS-Kapselung vue Tab-Umschalteffekt
js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen
js implementiert einige Funktionen der Eingabekomponente in Element und kapselt sie in eine Komponente (Beispielcode)
JavaScript implementiert ein Prototyp-Kapselungskarussell
Kapselungsmethode der JavaScript-Zeitlupenanimationsfunktion
JavaScript Canvas-Kapselung dynamische Uhr
Über Jacksons JSON-Tool-Klassenkapselung JsonUtils-Nutzung
Beispielcode für die JavaScript-Kapselung einer einfach verketteten Liste
Allgemeine Front-End-JavaScript-Methodenkapselung

<<: Lösen Sie das Installationsproblem der mysql8.0.19 Winx64-Version

>>: Laden Sie VSCode herunter, installieren Sie es unter Linux und verwenden Sie die Programmierung, um die aktuelle Zeit auszugeben