2017-07-11 17 views
1

私はネイティブフェッチライブラリhereを使用しています。 200 OK以外のレスポンスが返されると、レスポンス文字列Uncaught (in promise) TypeError: Failed to fetchを含む例外がスローされるようです。200以外の応答をキャプチャするOKフェッチから

特定のHTTP応答コードを捕まえて分岐する方法はありましたが、応答データは表示されますか?たとえば401の応答ですか?

フェッチ用のラッパーとして使用しているリクエストコードが添付されています。

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

を使用することができます。 'request'関数で' fetch'を直接待つことができます。 – Dai

+4

['new promise'に' async関数 'を渡すことは決してありません!](https://stackoverflow.com/questions/43083696/cant-throw-error-from-within-an-async-promise-executor-function/ 43083793#43083793) – Bergi

+0

私はこれが問題の主な原因だと思います!コードレビューありがとう –

答えて

1

「の成功は、(フェッチのための正確なチェックが)、約束が解決することを確認し、その後Response.okプロパティがtrueの値を持つことを確認含まれるコードは、この(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

あなたはResponseを読むためにResponseHeaders.statusプロパティ、.text()を確認することができます。 Responseが複数回読むことが予想される場合は、一般的に、あなたが `Promise`を自分でオブジェクトを構築する必要はありません話す.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); 
関連する問題