Der zweite Parameter in fetch()

Wenn wir versuchen, fetch()Funktionen im Unterricht zu verwenden, neigen wir dazu, sie zu verwenden, um Daten von der API auf der Website abzurufen.

https://reqres.in/ist eine Website, die Entwicklern APIs zum Testen ihres Codes bereitstellt. Entwickler können verschiedene HTTP-Methoden testen und eine echte Antwort, aber gefälschte Daten erhalten (REQRES, 2023). Wir werden diese Website nutzen, um unseren Code mehrmals zu testen.

Beispielsweise können wir anhand der gefälschten Daten den Namen des Benutzers ermittelnhttps://reqres.in/mit fetch().

Wenn Sie auf die Schaltfläche „fetch() testen, um Daten abzurufen“ klicken , versucht fetch, die Daten von „abzurufen“.https://reqres.in/api/users/2'mit der GET-Methode. Sie können sehen, dass „Janet“ unten angehängt ist.

Allerdings kann fetch nicht nur zum Abrufen der Daten verwendet werden. Es verfügt über einen zweiten Parameter, mit dem Sie anpassen können, was Sie mit der Abruffunktion tun möchten.

Es ist optional , Sie können es also völlig ignorieren und es funktioniert trotzdem, die Daten abzurufen, genau wie wir es zuvor getan haben.

Der zweite Parameter sollte ein Objekt sein . Und innerhalb dieses Objekts können Sie mehrere Unterparameter einbinden, darunter Body, Header, Methode usw. (MDN, 2023).

Es gibt ein Beispiel:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Wie nutzen wir es also?

Sobald Benutzer in diesem Beispiel auf die Schaltfläche „Beitrag testen“ klicken, veröffentlicht unsere App den Namen und die Stelle des Benutzers auf dem Server. Und es wird unten einen Zeitstempel geben, der den Benutzern die Erstellungszeit mitteilt.

.catch((error) =>{})

Wie wir alle wissen, gibt die Funktion fetch() zurück a Promise Object. Was aber, wenn der Server nicht antwortet und das Versprechen nicht eingehalten wird?

Es wird ein Fehler auftreten!

Daher müssen wir catch((error) => {})den Fehler abfangen, um einen Absturz zu vermeiden.

Sehen wir uns den Beispielcode an.

In diesem Beispiel habe ich „versehentlich“ den falschen Link erhalten. Das Versprechen wird also nicht eingehalten und es liegt ein Fehler vor. Wenn Benutzer also auf die Schaltfläche „Beitrag testen“ klicken, gibt die Konsole „Fehler!!!“ aus.

Mehr Verwendung des Response-Objekts

Wir haben die Situation besprochen, in der ein Fehler vorliegt und das Promise-Objekt nicht erfüllt wird. Wenn jedoch das von zurückgegebene Promise-Objekt fetch()erfüllt ist, wird ein Response-Objekt zurückgegeben .

Es gibt einige Instanzeigenschaften (MDN, 2023):

• Antwort.ok
• Antwortstatus
• Response.statusText
• Antwort.url
• …

Ich habe Response.status, das den HTTP-Statuscode zurückgibt, und , das einen booleschen WertResponse.ok zurückgibt , verwendet, damit wir sehen können, ob der Abruf erfolgreich ist.

Wenn Benutzer in diesem Beispiel auf die Schaltfläche „Beitrag testen“ klicken, werden der HTTP-Statuscode und ein boolescher Wert angezeigt, um zu sehen, ob der Beitrag erfolgreich war.

Ein Abruf wird abgebrochen

Benutzer können einen Abruf auch abbrechen, indem sie die AbortController Object.

Wir müssen ein AbortController Objectseparates erstellen.

let controller = new AbortController();

Unser neuer zweiter Parameter lautet also:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Ich habe ein Intervall festgelegt, um den abort() auszuführen. Wenn ich also zuerst auf „Abbrechen“ klicke, gibt Test Post einen „AbortError“ in der Konsole aus. Und der HTTP-Status und -Code werden nicht wie zuvor unter der Schaltfläche „Beitrag testen“ angezeigt.

Referenz

MDN. (2023). Fetch() – Web-APIs: MDN. Web-APIs | MDN. Abgerufen am 31. März 2023 vonhttps://developer.mozilla.org/en-US/docs/Web/API/fetch

ERFORDERLICH. (2023). Eine gehostete Rest-API, die bereit ist, auf Ihre Ajax-Anfragen zu antworten. Erforderlich. Abgerufen am 31. März 2023 vonhttps://reqres.in/

MDN. (2023). Antwort – Web-APIs: MDN. Web-APIs | MDN. Abgerufen am 31. März 2023 vonhttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Abortcontroller – Web-APIs: MDN. Web-APIs | MDN. Abgerufen am 31. März 2023 vonhttps://developer.mozilla.org/en-US/docs/Web/API/AbortController