So kapseln Sie Axios-Anfragen mit Vue

Standard exportieren {
// Entwicklungsumgebung dev: {
    baseUrl: „Öffentliche Adresse der Entwicklungsumgebung“
},
// Testumgebungstest
prüfen: {
    baseUrl: "Öffentliche Adresse der Testumgebung"
},
//Online-Schnittstelle prod: {
    baseUrl: "Öffentliche Adresse der Online-Umgebung"
}
};

importiere Axios von „Axios“;
Umgebung aus "./env" importieren;
//Dies ist ein privater Domänenname, aber Sie können es auch leer lassen. var vipUrl = "/app";
// Eine Axios-Instanz erstellen const service = axios.create({
//Hier ist die BaseUrl für den Online-Schnittstellentest: env.prod.baseUrl + vipUrl,
    headers:{},//Anforderungsheader settimeout:2000,//Timeout });
//Anforderungs-Interceptor hinzufügen service.interceptors.request.use(
Konfiguration => {
    // Tun Sie etwas, bevor Sie die Anfrage senden config.headers["deviceType"] = "H5";
    console.log("Angeforderte Daten:", config);
    Konfiguration zurückgeben;
},
Fehler => {
    // Etwas gegen den Anforderungsfehler unternehmen return Promise.reject("error", error);
}
);

//Antwort-Interceptor hinzufügen service.interceptors.response.use(
Antwort => {
    // Etwas mit den Antwortdaten machen // console.log("returned data", response);
    Antwort zurückgeben;
},
Fehler => {
    // Etwas gegen den Fehler unternehmen return Promise.reject(error);
}
);
Standarddienst exportieren;

//Request.js-Datei importierenImport-Anfrage von "./request";

// Karussell-Exportfunktion getBanners(data) {
Rückgabeanforderung({
    url: "/banner", //Diese Adresse ist die Adresse, die nach dem Entfernen der öffentlichen Adresse und des privaten Domänennamens übrig bleibt. Methode: "GET", //Die Anforderungsmethode unterstützt mehrere Methoden wie Get, Post, Put, Delete usw. Daten//Parameter, die beim Senden von Anforderungen konfiguriert werden müssen. Sie können es auch leer lassen, wenn keine Parameter vorhanden sind. });
}

<Skript>
//Führen Sie die erforderliche Schnittstelle ein import { getBanners } from "../http/api";
Standard exportieren {
Name: "Home",
Komponenten: {},
montiert() {
    //Direkt verwenden. Dann ist der Rückruf für eine erfolgreiche Anfrage. Catch ist der Rückruf für eine fehlgeschlagene Anfrage getBanners()
    .dann(Ergebnis => {
        window.console.log("111", Ergebnis);
    })
    .catch(err => {
        window.console.log("222", err);
    });
},
Methoden: {}
};
</Skript>