So kapseln Sie Axios einfach in Vue

importiere Axios von „Axios“;
Vue.prototype.$axios = axios;

Axios von „Axios“ importieren

axios.defaults.timeout = 5000; //Antwortzeit axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'; //Anforderungsheader konfigurieren axios.defaults.withCredentials= true; //Mit Cookie
axios.defaults.baseURL = 'http://localhost:8080/'; //Schnittstellenadresse konfigurieren //POST-Parameterserialisierung (Anforderungs-Interceptor hinzufügen)
axios.interceptors.request.use((Konfiguration) => {
	//Sie können hier je nach Backend Serialisierungscode hinzufügen. Das von mir verwendete SSM-Backend akzeptiert JSON-Objekte. Wenn eine Serialisierung erforderlich ist, können Sie die qs-Komponente return config verwenden;
},(Fehler) =>{
    console.log('falsche Parameterübergabe')
    returniere Promise.reject(Fehler);
});

//Statusbeurteilung zurückgeben (Antwort-Interceptor hinzufügen)
axios.interceptors.response.use((res) => {
    //Etwas mit den Antwortdaten machen if (!res.data.success) {
        gibt Promise.resolve(res) zurück;
    }
    Rückgabewert;
}, (Fehler) => {
    console.log('Netzwerkanomalie')
    returniere Promise.reject(Fehler);
});

//Ein Versprechen zurückgeben (eine Post-Anfrage senden)
Exportfunktion fetchPost(URL, Parameter) {
    returniere neues Promise((lösen, ablehnen) => {
        axios.post(URL, Parameter)
            .dann(Antwort => {
                Lösung (Antwort);
            }, err => {
                ablehnen(fehler);
            })
            .catch((Fehler) => {
                ablehnen(Fehler)
            })
    })
}
Gibt ein Promise zurück (sendet eine Get-Anfrage)
Exportfunktion fetchGet(URL, Param) {
    returniere neues Promise((lösen, ablehnen) => {
        axios.get(url, {params: param})
            .dann(Antwort => {
                Lösung (Antwort)
            }, err => {
                ablehnen (Fehler)
            })
            .catch((Fehler) => {
                ablehnen(Fehler)
            })
    })
}
Standard exportieren {
    Beitrag abrufen,
    holenGet,
}

loginPost: Funktion() {
		let Parameter = {
			'Passwort': '123',
			'Benutzername': 'Administrator'
		}
		http.fetchPost('/login', params).then((data) => {
			console.log(Daten)
		}).catch(err => {
			console.log(fehler)
		})
	},
hallo: function() {
		http.fetchGet('/hallo', "").then((data) => {
			console.log(Daten)
		}).catch(err => {
			console.log(fehler)
		})
	},

<!-- Domänenübergreifende Schnittstellenkonfiguration -->
    <mvc:cors>
        <!-- allowed-methods="*" --> <!-- bedeutet, dass alle Anfragen gültig sind -->
        <mvc:Mapping-Pfad="/**" allowed-origins="*"
                     erlaubte Methoden="POST, GET, OPTIONEN, LÖSCHEN, PUT"
                     allowed-headers="Inhaltstyp, Zugriffskontrolle-Header zulassen, Autorisierung, X-Angefordert-Mit"
                     allow-credentials="true"/>
    </mvc:cors><!-- Domänenübergreifende Schnittstellenkonfiguration-->

modul.exporte = {
  devServer: {
    Proxy: {
        '/api': {
            Ziel: 'http://127.0.0.1:8080',
            // Ein virtueller Server wird lokal erstellt und dann werden die angeforderten Daten gleichzeitig gesendet und empfangen, sodass es bei der Interaktion zwischen Server und Server keine domänenübergreifenden Probleme gibt. changeOrigin: true, 
            ws: wahr,
            PfadNeu schreiben: {
                '^/api': '' 
                // Ersetzen Sie die Anforderungsadresse im Ziel, d. h. wenn Sie in Zukunft die Adresse http://api.jisuapi.com/XXXXX anfordern, schreiben Sie einfach /api}
        }
    }
  }
}

axios.defaults.withCredentials = wahr;