typescript - 使用 fetch api 处理 500 响应

Question

我们有以下对 fetch 的调用。

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

这在我们收到 200 响应时有效，但在我们收到 500 响应时不向控制台记录任何内容。我们如何处理 500？

Answer 1

工作解决方案

将 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() 返回包含 Response 对象的 Promise。 Promise 可以实现或拒绝。 Fulfillment 运行第一个 then()，返回它的 promise ，然后运行第二个 then()。拒绝在第一个 then() 上抛出并跳转到 catch()。

引用资料

MDN - Promise

MDN - Checking that the fetch was successful

Google - Introduction to Fetch