J'essaie d'écrire une fonction getData() générique que je peux appeler avec différentes URL et de prendre différentes actions lorsque les données sont renvoyées par le serveur.

function getData(url){
        console.log("loading: " + url)
        return fetch(url)
            .then((response) => {
                console.log("received response")
                console.log(response.status)
                if(response.status >= 200 && response.status < 300)                 { 
                    console.log("url returned data...")
                    return response.json()
                } else {
                    console.log("url did not return data...")
                    throw new Error("The url did not return data")
                }
             })
             .catch((err) => {return err})
}
    
getData("notexisting.json")
         .then(data => console.log("success!!"))
         .catch(err => console.log("error!!"))

Le problème est que cet extrait de code ne montre aucune erreur même si l'url n'existe pas. De plus, les deux console.logs à l'intérieur des instructions if ne sont jamais atteints et la fonction getData() réussit toujours... même s'il y a une erreur...

0
Kokodoko 7 mars 2019 à 16:32

2 réponses

Meilleure réponse

Vous pouvez simplement supprimer l'instruction catch de getData et cela fonctionnera exactement comme vous l'attendiez

function getData(url){
        console.log("loading: " + url)
        return fetch(url)
            .then((response) => {
                console.log("received response")
                console.log(response.status)
                if(response.status >= 200 && response.status < 300)                 { 
                    console.log("url returned data...")
                    return response.json()
                } else {
                    console.log("url did not return data...")
                    throw new Error("The url did not return data")
                }
             })
}

getData("notexisting.json")
         .then(data => console.log("success!!"))
         .catch(err => console.log("error!!"))

// output is error!!
2
Max 7 mars 2019 à 13:43

Depuis les documents:

La promesse renvoyée par fetch () ne sera pas rejetée sur l'état d'erreur HTTP même si la réponse est un HTTP 404 ou 500. Au lieu de cela, elle se résoudra normalement (avec le statut ok défini sur false), et elle ne rejettera qu'en cas de défaillance du réseau ou si quelque chose a empêché la demande de se terminer.

Réf : https://developer.mozilla.org/it/docs/ Web/API/Fetch_API/Using_Fetch

Je préfère utiliser des bibliothèques comme Axios car je préfère son comportement par rapport à l'extraction standard (qui doit être polyremplie de toute façon) .

1
Mosè Raguzzini 7 mars 2019 à 13:33