Heim Web-Frontend js-Tutorial So implementieren Sie die globale Registrierung in Axios

So implementieren Sie die globale Registrierung in Axios

Jun 12, 2018 am 10:08 AM
axios 全局

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur globalen Registrierung von Axios vor. Der Artikel stellt es ausführlich anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert, den jeder, der es braucht, lernen kann unten zusammen.

Vorwort

Als ich kürzlich ein Projekt mit Vue geschrieben habe, habe ich Axios verwendet, da Axios Vue.use() nicht verwenden kann (Details finden Sie hier). eingeführt (siehe diesen Artikel), sodass Sie bei Verwendung von Axios in jede .vue-Datei importieren müssen. Wenn nur wenige .vue-Dateien vorhanden sind, ist dies in Ordnung, wenn jedoch viele vorhanden sind, ist dies etwas problematisch.

Später habe ich darüber nachgedacht, ob ich Axios direkt zum Vue-Prototyp hinzufügen könnte, damit eine globale Registrierung erreicht würde. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung.

Die Methode ist wie folgt:

1. Führen Sie zuerst Axios

import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
 el: '#app',
 render:h => h(App)
})
Nach dem Login kopieren

ein .js 2. Wenn Sie es in einer .vue-Datei verwenden, achten Sie darauf, dass Sie dies

<script>
export default {
 name:&#39;app&#39;,
 data(){
  return{
   msg:&#39;hello&#39;
  }
 },
 methods:{
  send(){
   // 注意:因为 axios 是加到 Vue 的原型中了,所以使用 axios 方法时,前面需要加 this
   this.axios.get(&#39;https://www.baidu.com*******&#39;)
   .then(resp => {
    console.log(resp.data)
   }).catch(err => {
    console.log(err);
   })
  }
 }
}
</script>
Nach dem Login kopieren

hinzufügen. Ich hoffe, dass es für alle hilfreich ist alle in der Zukunft.

Verwandte Artikel:

Wie man helloWorld mit vue-cli in vue erstellt

Probleme bei der Wertübergabe in Laui

So implementieren Sie ein Lotteriesystem mit JavaScript

Ausführliche Antwort: Welche Auswirkungen haben Änderungen in Vue auf Komponenten?

So verpacken Sie mit Parcel

Detaillierte Erklärung zur Konfiguration des Vue-Verpackungstools

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die globale Registrierung in Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn bei der Verwendung von Axios in einer Vue-Anwendung „Uncaught (in Promise) Error: Request failed with status code 500' auftritt? Was soll ich tun, wenn bei der Verwendung von Axios in einer Vue-Anwendung „Uncaught (in Promise) Error: Request failed with status code 500' auftritt? Jun 24, 2023 pm 05:33 PM

Axios wird häufig in Vue-Anwendungen verwendet. Axios ist ein Promise-basierter HTTP-Client, der in Browsern und Node.js verwendet werden kann. Während des Entwicklungsprozesses erscheint manchmal die Fehlermeldung „Uncaught(inpromise)Error: Requestfailedwithstatuscode500“. Für Entwickler kann diese Fehlermeldung schwer zu verstehen und zu lösen sein. In diesem Artikel wird dies untersucht

Auswahl der Datenanforderung in Vue: Axios oder Fetch? Auswahl der Datenanforderung in Vue: Axios oder Fetch? Jul 17, 2023 pm 06:30 PM

Auswahl der Datenanforderung in Vue: AxiosorFetch? In der Vue-Entwicklung ist die Bearbeitung von Datenanfragen eine sehr häufige Aufgabe. Die Wahl des für Datenanfragen zu verwendenden Tools ist eine Frage, die berücksichtigt werden muss. In Vue sind Axios und Fetch die beiden am häufigsten verwendeten Tools. In diesem Artikel werden die Vor- und Nachteile beider Tools verglichen und Beispielcode bereitgestellt, der Ihnen bei der Entscheidungsfindung helfen soll. Axios ist ein Promise-basierter HTTP-Client, der in Browsern und Node funktioniert.

Was soll ich tun, wenn bei der Verwendung von Axios in einer Vue-Anwendung „TypeError: Failed to fetch' auftritt? Was soll ich tun, wenn bei der Verwendung von Axios in einer Vue-Anwendung „TypeError: Failed to fetch' auftritt? Jun 24, 2023 pm 11:03 PM

Kürzlich bin ich bei der Entwicklung von Vue-Anwendungen auf ein häufiges Problem gestoßen: die Fehlermeldung „TypeError: Failedtofetch“. Dieses Problem tritt auf, wenn Axios zum Senden von HTTP-Anfragen verwendet wird und der Backend-Server nicht korrekt auf die Anfrage antwortet. Diese Fehlermeldung weist normalerweise darauf hin, dass die Anfrage den Server nicht erreichen kann, möglicherweise aus Netzwerkgründen oder weil der Server nicht antwortet. Was sollen wir tun, nachdem diese Fehlermeldung erscheint? Hier sind einige Problemumgehungen: Überprüfen Sie Ihre Netzwerkverbindung aufgrund von

Wie kann das Problem „Fehler: Netzwerkfehler' bei der Verwendung von Axios in der Vue-Anwendung gelöst werden? Wie kann das Problem „Fehler: Netzwerkfehler' bei der Verwendung von Axios in der Vue-Anwendung gelöst werden? Jun 25, 2023 am 08:27 AM

Wie kann das Problem „Fehler: NetworkError“ bei der Verwendung von Axios in der Vue-Anwendung gelöst werden? Bei der Entwicklung von Vue-Anwendungen verwenden wir häufig Axios, um API-Anfragen zu stellen oder Daten abzurufen, aber manchmal stoßen wir in Axios-Anfragen auf „Fehler: NetworkError“. Was sollten wir in diesem Fall tun? Zunächst müssen Sie verstehen, was „Fehler:Netzwerkfehler“ bedeutet. Normalerweise bedeutet dies, dass die Netzwerkverbindung unterbrochen ist

Nutzen Sie Vue und Axios effizient, um die Stapelverarbeitung von Front-End-Daten zu implementieren Nutzen Sie Vue und Axios effizient, um die Stapelverarbeitung von Front-End-Daten zu implementieren Jul 17, 2023 pm 10:43 PM

Nutzen Sie Vue und Axios effizient, um die Stapelverarbeitung von Front-End-Daten zu implementieren. In der Front-End-Entwicklung ist die Datenverarbeitung eine häufige Aufgabe. Wenn wir große Datenmengen verarbeiten müssen, wird die Datenverarbeitung sehr umständlich und ineffizient, wenn es keine wirksame Methode gibt. Vue ist ein hervorragendes Front-End-Framework und Axios ist eine beliebte Netzwerkanforderungsbibliothek. Sie können zusammenarbeiten, um eine Stapelverarbeitung von Front-End-Daten zu implementieren. In diesem Artikel wird detailliert beschrieben, wie Vue und Axios effizient für die Stapelverarbeitung von Daten eingesetzt werden können, und es werden relevante Codebeispiele bereitgestellt.

Was ist die Spezifikation für die Trennung der Parameterübergabe zwischen Java-Axios und Spring-Front-End und -Back-End? Was ist die Spezifikation für die Trennung der Parameterübergabe zwischen Java-Axios und Spring-Front-End und -Back-End? May 03, 2023 pm 09:55 PM

1. Die der @RequestParam-Annotation entsprechende Axios-Parameterübertragungsmethode verwendet den folgenden Springjava-Code als Beispiel. Die Schnittstelle verwendet das POST-Protokoll und die Parameter, die akzeptiert werden müssen, sind tsCode, indexCols und table. Wie soll Axios für diese Spring-HTTP-Schnittstelle Parameter übergeben? Wie viele Methoden gibt es? Lassen Sie uns sie einzeln vorstellen. @PostMapping("/line")publicList

Wie rufen die Axios- und SpringBoot-Frontends die Back-End-Schnittstelle für die Dateninteraktion auf? Wie rufen die Axios- und SpringBoot-Frontends die Back-End-Schnittstelle für die Dateninteraktion auf? May 13, 2023 am 10:34 AM

1. Die Einführung eines vollständigen Systems, Front-End- und Back-End-Interaktion ist unerlässlich. Dieser Prozess kann in die folgenden Schritte unterteilt werden: Das Front-End initiiert eine Anfrage an das Back-End -End-Parameter, es beginnt, Methoden Schicht für Schicht aufzurufen, um die Daten zu verarbeiten. Die endgültigen Daten werden an die Front-End-Schnittstelle zurückgegeben. Nachdem die Front-End-Anfrage erfolgreich war, werden die Daten an die Schnittstelle gerendert . 2. Projektstruktur Front-End-Technologie: axios Back-End-Technologie: SpringBoot (Dies spielt keine Rolle, Sie müssen jedoch über einen Zugriffspfad zur Steuerungsschicht verfügen, die sogenannte Anforderung. Die entsprechende Adressmethode kann SSM verwenden (Framework, SSH-Framework usw.) Das Obige ist die allgemeine Dateistruktur. Ich glaube, dass die Back-End-Datenverarbeitung für alle in Ordnung sein wird. Es ist nichts anderes als: Die Kontrollschicht empfängt die Front-End-Anfrage und ruft die entsprechende Geschäftsschicht auf Schnittstellenmethode

So verwenden Sie vue3+ts+axios+pinia, um eine sinnlose Aktualisierung zu erreichen So verwenden Sie vue3+ts+axios+pinia, um eine sinnlose Aktualisierung zu erreichen May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia realisiert sinnlose Aktualisierung 1. Laden Sie zuerst aiXos und pinianpmipinia im Projekt herunter--savenpminstallaxios--save2. AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

See all articles