Question

我正在使用ES6，并尝试处理fetch()结果的错误状态。

我知道我可以这样捕获错误：

fetch(`http://${this.serverAddress}/reset`)
        .then((resp) => {
            Logger.debug(JSON.stringify(resp));
        })
        .catch((err) => {
            Logger.debug(JSON.stringify(err));
        });

在catch块中，输入一个Error并显示消息“无法获取”。没有状态信息。

我发现了以下建议：

fetch('/some/url/')
  .then(processResponse)
  .then(response => {
    // do something
  })
  .catch(response => {
    // repsonses with status >= 400 get rejected. you can access response.status and response.data here too
    if (response.status === 400) {
        // handle form validation errors, response.data.errors...
    } else if (response.status === 403) {
        // handle permission errors
    } // etc
  });

但是response.status在catch块中是 undefined 。

如何获取错误的状态码来处理？

更新：

感谢您的回复。请查看我的更新：

我的实际令牌看起来像http://api.service/v2/prices/latest?token=err。如果我写的是令牌而不是err，那么它可以工作。当我尝试使用此URL时，我的代码将转到catch块，而不是then。

我在浏览器控制台中发现以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

如果我添加{mode: "no-cors"}，代码将转到then，但是状态始终为0。这不是我想要的。

我尝试添加

mode: "cors",
headers: {
        "Access-Control-Allow-Credentials": true,
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json"
    }

这没有帮助，我仍然遇到No 'Access-Control-Allow-Origin' header错误。

Answer 1

您可以尝试通过!ok提取完成后立即在响应处理过程中抛出错误来处理错误状态：

fetch('/some/url/')
  .then(response => {
    if (!response.ok) {
      throw Error({ status: response.status });
    }
    response.json();
  })
  .then(response => {
    // do something
  })
  .catch(error => {
    switch(error.status) {
      // ...
    }
  });

Answer 2

从文档中可以看出，catch块只有在请求未完成时才能到达。当有状态码可用时（并且也接收到所有其他数据），fetch将解决，因此将到达then块。

即使响应是HTTP 404或500，从fetch（）返回的Promise也不会拒绝HTTP错误状态。相反，它将正常解析（ok状态设置为false），并且只会拒绝网络故障或是否有任何原因阻止请求完成。 -Source

因此，您要做的只是记录resp.status而不是resp。

fetch(`http://${this.serverAddress}/reset`)
  .then((resp) => {
    Logger.debug(JSON.stringify(resp.status));
  })
  .catch((err) => {
    Logger.debug(JSON.stringify(err));
});

在catch块中，出现一条错误，消息为“无法提取”。没有状态信息。

因此，在调用catch块的情况下，请求甚至没有完成。这可能是由于您没有使用method，headers，...等选项而引起的。如果需要，哪个和哪个值取决于您使用的后端。

Answer 3

您无法在代码中检查状态。

从fetch（）返回的Promise不会因HTTP错误状态而拒绝即使响应是HTTP 404或500，它也会解析通常（将ok状态设置为false），并且只会在网络故障或是否有任何阻止请求完成的事情。

基本上，只有在发生网络错误时，fetch（）才会拒绝承诺。

fetch API提供了一个简单的ok标志，用于指示HTTP响应的状态代码是否在成功范围内。参见下面的示例

fetch("http://httpstat.us/500")
    .then(function(res) {
        if (!res.ok) {
            throw Error(res.statusText);
        }
        return res;
    }).then(function(res) {
        console.log("ok");
    }).catch(function(error) {
        console.log(error);
    });

Answer 4

在获取请求之后，检查响应是否符合预期。如果不是，请使用自定义消息抛出新错误。在catch中检查此自定义消息是否存在引发的错误。相应地处理。您还可以创建自定义错误并进行检查。

如何处理ES6 Promises中的错误状态？

4 个答案: