Capture des réponses autres que 200 OK à partir de l'extraction

Question

J'utilise la bibliothèque de récupération native comme indiqué here. Il semble que chaque fois qu'une réponse autre qu'un 200 OK est renvoyé, il déclenche une exception avec la réponse de chaîne Uncaught (in promise) TypeError: Failed to fetch.

Existait-il un moyen d'intercepter et de se ramifier sur des codes de réponse HTTP spécifiques tout en affichant les données de réponse? Par exemple une réponse 401?

J'ai joint mon code de requête que j'utilise comme enveloppe pour l'extraction.

static request(url, data) { 

    let headers = { 
     "Authorization": window.localStorage.getItem("Authorization"), 
     "Content-Type": "application/json" 
    }; 

    let options = { 
     method: "GET", 
     headers: headers, 
     mode: "no-cors", 
     cache: "no-cache", 
    }; 

    if (data) { 
     options = { 
      method: "POST", 
      headers: headers, 
      mode: "no-cors", 
      cache: "no-cache", 
      body: JSON.stringify(data) 
     } 
    } 

    return new Promise(async (resolve, reject) => { 

     try { 

      let response = await fetch(url, options); 
      let jsonResponse = await response.json(); 
      return resolve(jsonResponse); 

     } catch (error) { 
      // hashHistory.push("/login"); 
      return reject(error); 
     } 

    }) 

} 

Answer 1

« Un contrôle précis pour une extraction réussie() comprendrait la vérification que la promesse résolue, puis vérifier que la propriété Response.ok a une valeur true Le code ressemblerait à quelque chose comme ça (https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful).:

fetch('flowers.jpg').then(function(response) { 
    if(response.ok) { 
    response.blob().then(function(myBlob) { 
     var objectURL = URL.createObjectURL(myBlob); 
     myImage.src = objectURL; 
    }); 
    } else { 
    console.log('Network response was not ok.'); 
    } 
}) 
.catch(function(error) { 
    console.log('There has been a problem with your fetch operation: ' + error.message); 
}); 

"

Answer 2

Vous pouvez vérifier ResponseHeaders.status propriété, .text() lire Response. Si Response devrait être lu plus d'une fois, vous pouvez utiliser .clone()

let request = fetch("/path/to/resource"); 

request 
.then(response => { 

    const status = response.headers.get("status"); 

    console.log(status); 

    if (status == 401) { 
     // read 401 response 
     response.text().then(res = > console.log(res)); 
     return "404.html" 
    } 
    if (status == 200) { 
     return "200.html" 
    } 
}) 
.then(result => console.log(result)) 
.catch(err => // handle error);