So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue

Einrichten einer einfachen HTTP-Anforderung

Führen Sie zunächst den folgenden Befehl im Terminal aus, um Axios im Projekt zu installieren:

Installieren Sie Axiosnpm. Installieren Sie Axios.

Importieren Sie dann Axios wie folgt in Ihre Vue-Komponente.

//App.view - Axios importieren
<Skript>
Axios von „Axios“ importieren

Standard exportieren {
  aufstellen () {

    }
}
</Skript>

Als Nächstes verwenden wir axios.get, um ein zufälliges Zitat aus der URL von Kanyes REST-API zu erhalten. Sie können dann Promise.then verwenden, um zu warten, bis die Anfrage eine Antwort zurückgibt.

//App.vue – Senden unserer HTTP-Anfrage
<Skript>
Axios von „Axios“ importieren

Standard exportieren {
  aufstellen () {
     axios.get('https://api.kanye.rest/').then(response => {
        // Antwort verarbeiten
     })
  }
}
</Skript>

Nachdem wir nun die Antwort von der API erhalten können, schauen wir uns an, was sie bedeutet. Speichern Sie es als Zitat mit dem Namen „Zitat“.

//App.vue – Speichern der Antwort
<Skript>
Axios von „Axios“ importieren
importiere { ref } von 'vue'

Standard exportieren {
  aufstellen () {
     axios.get('https://api.kanye.rest/').then(response => {
        // Antwort verarbeiten
        Zitat.Wert = Antwort
     })
     zurückkehren {
      Zitat
     }
  }
}
</Skript>

Zum Schluss geben Sie es in die Vorlage aus und stellen es kursiv und in Anführungszeichen dar. Außerdem müssen Sie die Quelle des Zitats hinzufügen.

//App.vue - Vorlagencode
<Vorlage>
  <div>
    <i>"{{ Zitat }}"</i>
    - Kanye West
  </div>
</Vorlage>

Überprüfen Sie den Inhalt in Ihrem Browser.

Wir können ein zufälliges Zitat von Kanye sehen, zusammen mit einigen zusätzlichen Informationen, wie etwa dem Antwortcode der Anfrage.

Für unsere kleine Anwendung sind wir nur am data.quote-Wert interessiert, daher müssen wir im Skript angeben, auf welche Eigenschaft der Antwort wir zugreifen möchten.

//App.vue – nur unser Angebot erhalten
axios.get('https://api.kanye.rest/').then(response => {
        // Antwort verarbeiten
        Zitat.Wert = Antwort.Daten.Zitat
})

Mit dem obigen Code können Sie erreichen, was Sie möchten:

Axios mit async/await

Sie können Axios und den asynchronen/Wartemodus in Vue-Programmen kombinieren.

Kommentieren Sie im Setup-Prozess zuerst den aktuellen GET-Code aus und erstellen Sie dann eine asynchrone Methode namens loadQuote. Intern können wir dieselbe Methode axios.get verwenden, möchten aber warten, bis sie asynchron abgeschlossen ist, und dann das Ergebnis in einer Konstanten namens „Antwort“ speichern.

Legen Sie dann den Wert des Angebots fest.

//App.vue - asynchron Axios
const loadQuote = async () => {
      const Antwort = warte auf KanyeAPI.getQuote()
      Zitat.Wert = Antwort.Daten.Zitat
}

Es funktioniert genauso wie der vorherige Code, dieses Mal wird jedoch das asynchrone Muster verwendet.

Fehlerbehandlung mit Axios

Im Muster „async-await“ können Sie mithilfe von „try“ und „catch“ eine Fehlerbehandlung zu API-Aufrufen hinzufügen:

//Fehlerbehandlung mit async/await
versuchen {
        const Antwort = warte auf KanyeAPI.getQuote()
        Zitat.Wert = Antwort.Daten.Zitat
} fangen (Fehler) {
        console.log(fehler)
}

Wenn Sie die Syntax für Rohversprechen verwenden, können Sie nach dem API-Aufruf ein .catch hinzufügen, um etwaige Fehler der Anfrage abzufangen.

//Fehlerbehandlung mit Promises
axios.get('https://api.kanye.rest/')
      .dann(Antwort => {
        // Antwort verarbeiten
        Zitat.Wert = Antwort.Daten.Zitat
      }).catch(err => {
      console.log(fehler)
})

Senden einer POST-Anfrage

Sehen wir uns an, wie eine POST-Anfrage gesendet wird. Hier verwenden wir JSONPlaceholder, um API-Aufrufe zu simulieren.

Ihre Dokumentation bietet einen /posts-Endpunkt zum Testen von POST-Anfragen.

Als Nächstes müssen wir eine Schaltfläche erstellen, die beim Anklicken unseren API-Aufruf auslöst. Erstellen Sie in der Vorlage eine Schaltfläche mit dem Namen „Beitrag erstellen“, die beim Klicken eine Methode mit dem Namen „createPost“ aufruft.

  <div>
    <i>"{{ Zitat }}"</i>
    - Kanye West
    <p>
      <button @click="createPost">Beitrag erstellen</button>
    </p>
  </div>
</Vorlage>

Als nächstes erstellen wir die Methode createPost in unserem Code und geben sie vom Setup zurück.

Diese Methode ähnelt der vorherigen GET-Anforderung. Sie müssen nur axios.post aufrufen und die URL (d. h. https://jsonplaceholder.typicode.com/posts) übergeben, um die Daten zu kopieren und in das Dokument einzufügen.

//App.vue
const createPost = () => {
      axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
          Titel: 'foo',
          Körper: 'Balken',
          Benutzer-ID: 1,
      })).dann(Antwort => {
        console.log(Antwort)
      })
}

Klicken Sie auf die Schaltfläche, um es auszuprobieren. Sie können sehen, dass die Konsole viele Informationen ausgibt, die uns mitteilen, dass die POST-Anforderung erfolgreich abgeschlossen wurde.

Schreiben wiederverwendbarer API-Aufrufe mit Axios

Erstellen Sie in Ihrem Projekt ein src/services-Verzeichnis und verwenden Sie es, um alle Ihre API-Aufrufe zu organisieren.

Das Verzeichnis enthält zwei Dateitypen:

• API.js: Wird verwendet, um eine Axios-Instanz mit einer definierten Basis-URL zu erstellen, die für alle Routen verwendet wird
• *{spezifische Funktionalität}*API.js: Eine spezifischere Datei, die zum Organisieren von API-Aufrufen in wiederverwendbare Module verwendet werden kann

Dies hat den Vorteil, dass Sie durch die Änderung eines kleinen Codeteils problemlos zwischen Entwicklungs- und Produktionsservern wechseln können.

Erstellen Sie die Datei services/API.js und legen Sie die Axios-Basis-URL standardmäßig auf die Kanye REST API fest.

API.js importiert Axios von „Axios“

exportiere Standard(url='https://api.kanye.rest') => {
    returniere axios.create({
        baseURL: URL,
    })
}

Erstellen Sie als Nächstes eine KanyeAPI.js-Datei und importieren Sie die API aus ./API. Hier möchten wir die verschiedenen API-Aufrufe exportieren.

Durch den Aufruf von API() erhalten Sie eine Axios-Instanz, auf der Sie .get oder .post aufrufen können.

//KanyeAPI.js
API aus „./API“ importieren

Standard exportieren {
    getQuote() {
        return API().get('/')
    },
}

Lassen Sie dann in App.vue unsere Komponente diese neue Datei über einen wiederverwendbaren API-Aufruf verwenden, anstatt Axios selbst zu erstellen.

//App.vue
const loadQuote = async () => {
      versuchen {
        const response = warte auf KanyeAPI.getQuote() // <--- DIESE ZEILE
        Zitat.Wert = Antwort.Daten.Zitat
      } fangen (Fehler) {
        console.log(fehler)
      }
}

Verschieben Sie als Nächstes „createPost“ in eine eigene wiederverwendbare Methode.

Zurück zu KanyeAPI.js. Fügen Sie createPost zu den Exportvorgaben hinzu. Dadurch werden die Daten für die POST-Anfrage als Parameter an unsere HTTP-Anfrage übergeben.

Ähnlich wie bei der GET-Anfrage erhalten Sie die Axios-Instanz über die API, dieses Mal müssen Sie jedoch den Standard-URL-Wert überschreiben und die JSON-Platzhalter-URL übergeben. Anschließend können Sie Axios POST wie gewohnt verwenden.

//KanyeAPI.js
Standard exportieren {
    getQuote() {
        return API().get('/')
    },
    Beitrag erstellen(Daten) {
        Rückgabe-API('https://jsonplaceholder.typicode.com/').post('/posts', Daten)
    }
}

So einfach

Zurück in App.vue können Sie Ihre neue Post-Methode wie folgt aufrufen.

//App.vue
 const createPost = () => {
      const Antwort = warte auf KanyeAPI.createPost(JSON.stringify({
          Titel: 'foo',
          Körper: 'Balken',
          Benutzer-ID: 1,
      }))

      console.log(Antwort)
}

Wenn Sie jetzt auf die Schaltfläche klicken, können Sie sehen, dass die dedizierte API ordnungsgemäß funktioniert.

Der Vorteil des Verschiebens der API-Aufrufe aus diesen Vue-Komponenten in eine eigene Datei besteht darin, dass diese API-Aufrufe überall in der Anwendung verwendet werden können. Dadurch entsteht wiederverwendbarerer und skalierbarerer Code.

Endgültiger Code

// App.vue
<Vorlage>
  <div>
    <i>"{{ Zitat }}"</i>
    - Kanye West
    <p>
      <button @click="createPost">Beitrag erstellen</button>
    </p>
  </div>
</Vorlage>

<Skript>
Axios von „Axios“ importieren
importiere { ref } von 'vue'
importiere KanyeAPI aus „./services/KanyeAPI“
Standard exportieren {
  aufstellen () {

    const Zitat = ref('')

    const loadQuote = async () => {
      versuchen {
        const Antwort = warte auf KanyeAPI.getQuote()
        Zitat.Wert = Antwort.Daten.Zitat
      } fangen (Fehler) {
        console.log(fehler)
      }
    }

    LadeQuote()

        // axios.get('https://api.kanye.rest/')
    // .dann(Antwort => {
    // // Antwort verarbeiten
    // Zitat.Wert = Antwort.Daten.Zitat
    // }).catch(err => {
    // console.log(fehler)
    // })

    const createPost = () => {
      const Antwort = warte auf KanyeAPI.createPost(JSON.stringify({
          Titel: 'foo',
          Körper: 'Balken',
          Benutzer-ID: 1,
      }))

      console.log(Antwort)
      // axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
      // Titel: "foo",
      // Körper: 'Balken',
      // Benutzer-ID: 1,
      // })).dann(Antwort => {
      // console.log(Antwort)
      // })

          }

        zurückkehren {
      Beitrag erstellen,
      Zitat
    }
  }
}
</Skript>

<Stil>
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

//API.js
Axios von „Axios“ importieren

exportiere Standard(url='https://api.kanye.rest') => {
    returniere axios.create({
        baseURL: URL,
    })
}

//KanyeAPI.js
API aus „./API“ importieren
Standard exportieren {
    getQuote() {
        return API().get('/')
    },
    Beitrag erstellen(Daten) {
        Rückgabe-API('https://jsonplaceholder.typicode.com/').post('/posts', Daten)
    }
}

Oben finden Sie Einzelheiten zur Verwendung der asynchronen Axios-Anforderungs-API in Vue. Weitere Informationen zur Verwendung der asynchronen Axios-Anforderungs-API in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!