2017-07-11 10 views
1

Ich verwende die native Abrufbibliothek wie angegeben here. Es scheint, dass jedes Mal, wenn eine andere Antwort als 200 OK zurückgegeben wird, eine Ausnahme mit der Zeichenfolgenantwort Uncaught (in promise) TypeError: Failed to fetch ausgelöst wird.Erfassen anderer Antworten als 200 OK ab Abruf

Gab es eine Möglichkeit, bestimmte HTTP-Antwortcodes abzufangen und zu verzweigen und trotzdem die Antwortdaten anzuzeigen? Zum Beispiel eine 401 Antwort?

Ich habe meinen Anfragecode angehängt, den ich als Wrapper für Fetch verwende.

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

    }) 

} 
+2

verwenden Im Allgemeinen Sie nie ein 'Promise' Objekt selbst konstruieren müssen. Sie können 'fetch' direkt in Ihrer' request' Funktion erwarten. – Dai

+4

[Übergeben Sie niemals eine Async-Funktion an "new Promise"!] (Https://stackoverflow.com/questions/43083696/cant-throw-error-from-within-a-async-promise-executo-function/ 43083793 # 43083793) – Bergi

+0

Ich denke, das ist die Hauptquelle des Problems! Danke für die Überprüfung des Codes –

Antwort

1

„Eine genaue Prüfung für einen erfolgreichen Abruf() überprüft würde, dass das Versprechen gelöst, dann, dass die Überprüfung der Response.ok Eigenschaft den Wert true hat der Code wie folgt aussehen würde (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); 
}); 

"

1

können Sie ResponseHeaders.status Eigenschaft überprüfen, .text()Response zu lesen. Wenn Response erwartet wird, mehr als einmal zu lesen, können Sie .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); 
Verwandte Themen