Detailliertes Beispiel für die Verwendung einer asynchronen JS-Fetch-Anforderung

Asynchronität verstehen

Zunächst müssen wir verstehen, dass es sich bei der Anfrage um einen asynchronen Prozess handelt.

Denn es braucht Zeit, die Anfrage an den Server zu senden und das Anfrageergebnis zu empfangen.

Wir müssen warten, bis die Anfrage abgeschlossen ist, und dann nach Abschluss der Anfrage den Rückruf ausführen, um die empfangenen Anfrageergebnisse zu verarbeiten.

abrufen (URL)

Um das Lernen zu erleichtern, übernehmen wir die API-Schnittstelle aus dem Uni-App-Tutorial.

  const url = 'https://unidemo.dcloud.net.cn/api/news'

Wir müssen wissen, dass Fetch auf Promise basiert. Wenn Sie es nicht verstehen, wird empfohlen, zuerst es6 Promise zu lernen.

fetch(url) kann direkt eine Get-Anfrage senden und ist selbst ein Promise.

Da es sich um ein Promise handelt, können wir den .then-Callback verwenden. Probieren wir es aus.

  fetch(url).then(res => {
    Konsole.log(res)
  })

Was gibt es zurück? Es ist eine Antwort.

Die Antwort ist ein gekapseltes Objekt, das einige Anforderungsparameter zurückgibt.

Ein nützlicheres Beispiel ist „Status“. Es teilt Ihnen mit, dass der Statuscode der Anfrage 200 lautet, was bedeutet, dass die Anfrage erfolgreich gesendet wurde.

Nachdem wir nun eine Get-Anfrage gesendet haben, interessiert uns vor allem, wo sich die angeforderten Daten befinden.

Antwort.json()

Keine Sorge, klicken Sie auf den Prototyp der Antwort und Sie werden eine JSON-Methode finden.

Sagen Sie einfach, dass diese Methode auch ein Promise zurückgibt.

Dann können wir dieses Versprechen für den nächsten Rückruf zurückgeben.

Geben Sie im nächsten Schritt die Ergebnisse aus, um zu sehen, was sie sind.

  fetch(url).then(response => {
    returniere response.json()
  }).dann(res => {
    Konsole.log(res)
  }) 

Es stellt sich heraus, dass die gewünschten Daten hier sind.

Kombinieren von „async“ und „await“

Obwohl wir „fetch“ verwenden können, um Rückrufe auszuführen und die oben genannten Anfragen zu stellen, macht die Verwendung von Rückrufen den Code dennoch weniger elegant.

Wenn Sie jedoch die asynchronen Schlüsselwörter „async“ und „await“ kennen, stehen Ihnen alternative Schreibweisen zur Verfügung.

Nachdem einer Funktion async hinzugefügt wurde, wird die Funktion zu einer asynchronen Funktion. In dieser Funktion kann await verwendet werden, um den Code auf das Versprechen des asynchronen Vorgangs warten zu lassen und das Rückrufergebnis zurückzugeben. Dies bedeutet, dass Asynchronität in Synchronisierung umgewandelt wird.

  const fetchAPI = async () => {
    const Antwort = warte auf Abruf (URL)
    const data = warte auf Antwort.json()
    console.log(Daten)
  }

  fetchAPI()

Ausnahmebehandlung

Und wir können den Statuscode in der ersten Schrittantwort verwenden, um zu bestimmen, ob der nächste Schritt normal ausgeführt werden kann.

  const fetchAPI = async () => {
    const Antwort = warte auf Abruf (URL)
    wenn (Antwort.Status === 200) {
		const data = warte auf Antwort.json()
		console.log(Daten)
    }anders{
		console.log('Anforderungsausnahme')
	}
  }

  fetchAPI()

Um einige unerwartete Situationen genauer zu berücksichtigen, verwenden Sie Try-Catch, um die Ausnahme zu erfassen.

  const fetchAPI = async () => {
    versuchen {
      const Antwort = warte auf Abruf (URL)
      wenn (Antwort.Status === 200) {
        const data = warte auf Antwort.json()
        console.log(Daten)
      } anders {
        console.log('Anforderungsausnahme')
      }
    } fangen (Fehler) {
      console.log(fehler)
    }
  }

  fetchAPI()

Anfrage posten

Der zweite Eingabeparameter von fetch ist ein Objekt, das die Konfigurationsparameter der Anfrage darstellt.

Die Anforderungsmethode kann auf „Posten“ eingestellt werden, und der Anforderungsheader und die Post-Eingabeparameter können ebenfalls festgelegt werden.

  holen(URL, {
    Methode: "POST",
    Überschriften: {
      'Inhaltstyp': 'application/json',
      ...
    },
    Text: JSON.stringify({
      'Schlüssel': Wert,
      ...
    })
  })

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von asynchronen JS-Abrufanforderungen. Weitere relevante Inhalte zur Verwendung von asynchronen JS-Abrufanforderungen 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!