使用 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