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

Question

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

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});
}

但是，我正在努力解决如何才能 return 稍后使用的响应的 JSON 值（在调用 myAPICall( ).then(..).catch(error => {...})

实际上我什至不确定这是执行此操作的正确方法。因此，如果有人除了将其作为一个工作示例之外还有其他建议，我们将非常欢迎。可以肯定的是，如果这是一个实际错误，我不想 "data" returned，因为 JSON 对象的格式将完全不同。

非常感谢，

Answer 1

您可能想要 return 自己的 Promise 和 resolve/reject 基于获取结果的 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))

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

How to properly handle a 400 (or any non-successful status codes) with JS fetch

javascript

es6-promise

fetch-api