javascript - 如何使用 JS fetch 正确处理 400(或任何不成功的状态代码)

Question

我有一个 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 对象的格式将完全不同。

非常感谢，

Answer 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))