Comprendre l'importance de res.ok dans l'API Fetch

J'ai toujours été un fervent utilisateur d'Axios pour la récupération de données, mais j'ai récemment décidé d'utiliser l'API Fetch à la place. En l'explorant, j'ai rencontré une différence subtile mais significative qui, selon moi, méritait d'être partagée.

Commençons par cet extrait de code. Que pensez-vous qu'il enregistre ?

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

Si vous pensiez que le message "échec" serait enregistré avec l'objet d'erreur sur la console, vous n'êtes pas seul : je pensais la même chose jusqu'à récemment. Cependant, ce n’est pas ainsi que fonctionne Fetch !

Voici le piège : même si la requête Fetch reçoit un code d'état 404 ou 500, elle ne génère pas d'erreur et ne déclenche pas le bloc catch. Au lieu de cela, la fonction fetch résout la promesse, vous laissant le soin de vérifier si la réponse a réussi.

Pour gérer correctement les erreurs avec Fetch, vous devez vérifier explicitement la propriété res.ok, comme ceci :

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)
}

Avec cette approche, si l'état de la réponse est en dehors de la plage de réussite (200-299), l'instruction throw est exécutée et l'erreur est interceptée dans le bloc catch.

Pourquoi cela se produit-il ?

Contrairement à Axios, Fetch ne considère pas les codes de réponse HTTP en dehors de la plage 2xx comme des erreurs. Au lieu de cela, il traite toutes les réponses HTTP, réussies ou non, comme des promesses tenues. Ce choix de conception donne aux développeurs plus de contrôle mais nécessite également des efforts supplémentaires pour gérer correctement les erreurs.

Comprendre la réponse.ok

La propriété Response.ok est un booléen qui est évalué à true pour les codes d'état HTTP compris entre 200 et 299. Pour tout autre code d'état, elle est évaluée à false. Cela en fait un moyen simple et fiable de vérifier si votre demande de récupération a abouti.

Par exemple :

• Un statut 200 indique le succès et définira réponse.ok sur true.
• Un statut 404 (introuvable) ou 500 (erreur du serveur) sera défini réponse.ok à faux.

Vous pouvez également accéder au code d'état directement à l'aide de response.status si vous avez besoin d'une gestion des erreurs plus granulaire, comme faire la distinction entre une erreur côté client (4xx) et une erreur côté serveur (5xx).

Merci d'avoir lu et j'espère que cela aidera quelqu'un !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!