web-dev-qa-db-ja.com

フェッチAPIで500応答を処理する

fetchへの次の呼び出しがあります。

this.http.fetch('flasher', { method: 'post', body: jsonPayload })
    .then(response => response.json())
    .then(data => console.log(data));

これは、200の応答を受信した場合は機能しますが、500の応答を受信した場合はコンソールに何も記録しません。 500をどのように処理しますか？

typescriptfetchaurelia
10
Shaun Luttin

実用的なソリューション

thenとcatchの組み合わせは機能します。

_fetch('http://some-site.com/api/some.json')  
  .then(function(response) {                      // first then()
      if(response.ok)
      {
        return response.text();         
      }

      throw new Error('Something went wrong.');
  })  
  .then(function(text) {                          // second then()
    console.log('Request successful', text);  
  })  
  .catch(function(error) {                        // catch
    console.log('Request failed', error);
  });
_

詳細

fetch()は、Promiseオブジェクトを含むResponseを返します。 Promiseは、満たされるか拒否されるかのいずれかになります。フルフィルメントは最初のthen()を実行し、promiseを返し、2番目のthen()を実行します。拒否は最初のthen()をスローし、catch()にジャンプします。

参考文献

MDN-約束

MDN-フェッチが成功したことの確認

Google-フェッチ入門

21
Shaun Luttin