如何使用 JS fetch 正确处理 400（或任何不成功的状态代码）答案

【问题标题】：How to properly handle a 400 (or any non-successful status codes) with JS fetch如何使用 JS fetch 正确处理 400（或任何不成功的状态代码）
【发布时间】：2018-07-19 10:12:18
【问题描述】：

我有一个 API 端点（恰好是 Django Rest Framework），它通常会返回一个已创建的响应状态代码 201，但在未正确输入字段时也会返回 400 错误。我正在使用 fetch 来消费这个 API 并返回 json，如下：

export const myAPICall = (postValues) => {
    return fetch('/myapi/', someHeaders)
        .then(resp => {
            return resp.json();
        })
        .then(data => {
            return data
        }).catch(error => (error));
}

所有这一切都工作得很好，但当然是一个 400 错误（技术上是一个有效的响应，不会引发错误），这个错误将包含可解析的 JSON，我想用它来通知用户。

错误的实际响应可能如下所示：

Response {type: "cors", url: "http://myapi/", redirected: false, status: 400, ok: false, …}

响应正文包含有用的 JSON。当响应不正确时，我仍然想抛出一个错误，所以这就是我最初所做的：

export const myAPICall = (postValues) => {
    return fetch('/myapi/', someHeaders)
        .then(resp => {
            if (!resp.ok) {
                throw resp;
            }
            return resp.json();
        })
        .then(data => {
            return data
        }).catch(error => { throw error});
}

但是，我正在苦苦思考如何才能返回响应的 JSON 值以供以后使用（在调用 myAPICall().then(..).catch(error => {.. .})

实际上，我什至不确定这是否是正确的方法。因此，如果有人提出建议，而不仅仅是将其作为一个工作示例，那将是非常受欢迎的。可以肯定的是，如果这是一个实际错误，我不想在 then 中返回“数据”，因为 JSON 对象的格式将完全不同。

非常感谢，

【问题讨论】：

标签： javascript es6-promise fetch-api

【解决方案1】：

您可能想要返回自己的 Promise 并根据获取的结果解决/拒绝该 Promise。大概是这样的：

export const myAPICall = (postValues) => {
  return new Promise((resolve, reject) => {
    fetch('/myapi/', someHeaders)
      .then(resp => {
        if (!resp.ok) {
          reject(resp);
        }
        else {
          resolve(resp);
        }
      })
      .catch(error => { reject(error) });
  });
}

myAPICall().then(result => console.log(result)).catch(err => console.log(err))

【讨论】：