Verstehen der Bedeutung von res.ok in der Fetch-API

Ich war schon immer ein begeisterter Benutzer von Axios zum Datenabruf, habe mich jedoch vor Kurzem entschieden, stattdessen die Fetch-API zu verwenden. Als ich es erkundete, stieß ich auf einen subtilen, aber bedeutenden Unterschied, der meiner Meinung nach es wert war, mitgeteilt zu werden.

Beginnen wir mit diesem Codeausschnitt. Was wird Ihrer Meinung nach protokolliert?

try{
   //this returns a 404 error
   const res = await fetch("randomapi....") 
   console.log("successful")
  }catch(err){
   console.log("failed", err)
}

Wenn Sie vermutet haben, dass es zusammen mit dem Fehlerobjekt in der Konsole „fehlgeschlagen“ protokollieren würde, sind Sie nicht allein – ich habe bis vor Kurzem das Gleiche gedacht. So funktioniert Fetch jedoch nicht!

Hier ist der Haken: Selbst wenn die Abrufanforderung den Statuscode 404 oder 500 erhält, wird kein Fehler ausgegeben und der Catch-Block wird nicht ausgelöst. Stattdessen löst die Abruffunktion das Versprechen auf und überlässt es Ihnen, zu überprüfen, ob die Antwort erfolgreich war.

Um Fehler mit Fetch korrekt zu behandeln, müssen Sie die Eigenschaft res.ok explizit überprüfen, etwa so:

try{
    //returns 404 error
    const res = await fetch("randomapi")
    if(!res.ok){
      throw new Error("fetch request failed")
    }
    console.log("successful")
    let data = await res.json()
    console.log(data)
}catch(err){
  console.log(err)
}

Wenn bei diesem Ansatz der Antwortstatus außerhalb des Erfolgsbereichs (200–299) liegt, wird die Throw-Anweisung ausgeführt und der Fehler wird im Catch-Block abgefangen.

Warum passiert das?

Im Gegensatz zu Axios betrachtet Fetch HTTP-Antwortcodes außerhalb des 2xx-Bereichs nicht als Fehler. Stattdessen werden alle HTTP-Antworten, ob erfolgreich oder nicht, als erfüllte Versprechen behandelt. Diese Designwahl gibt Entwicklern mehr Kontrolle, erfordert aber auch zusätzlichen Aufwand, um Fehler korrekt zu behandeln.

Response.ok verstehen

Die Eigenschaft „response.ok“ ist ein boolescher Wert, der für HTTP-Statuscodes zwischen 200 und 299 „true“ ergibt. Für alle anderen Statuscodes wird „false“ ausgewertet. Dies macht es zu einer einfachen und zuverlässigen Möglichkeit, zu überprüfen, ob Ihre Abrufanfrage erfolgreich war.

Zum Beispiel:

• Ein Status von 200 zeigt Erfolg an und setzt „response.ok“ auf „true“.
• Es wird ein 404-Status (nicht gefunden) oder 500-Status (Serverfehler) gesetzt „response.ok“ auf „false“ setzen.

Sie können auch direkt über „response.status“ auf den Statuscode zugreifen, wenn Sie eine detailliertere Fehlerbehandlung benötigen, z. B. die Unterscheidung zwischen einem clientseitigen Fehler (4xx) und einem serverseitigen Fehler (5xx).

Danke fürs Lesen und ich hoffe, das hilft jemandem da draußen!

Das obige ist der detaillierte Inhalt vonVerstehen der Bedeutung von res.ok in der Fetch-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!