使用Fetch时如何处理response.json()返回的拒绝态Promise？

我有如下使用fetch的函数：

function requests(url) {
  return fetch(url)
    .catch(function (error) {
      return null;
    })
    .then(function (response) {
      if (response == null) {
        return null;
      } else if (!response.ok) {
        if (response.status == 422) {
          // HIT No longer exists
          return null;
        } else if (response == 429) {
          //too many requests
          return null;
        }
        console.log("caught error: " + response.status);
        return null;
      }
      js = response.json();
      console.log(js);
      return js;
    });
}

我的问题是，fetch偶尔会处于“拒绝”状态。在尝试读取response.json()之前，我的代码均未捕获到该错误。当我打印js时，得到如下内容：

Promise
  [[Prototype]]: Promise
  [[PromiseState]]: "rejected"
  [[PromiseResult]]: SyntaxError:      Unexpected token '<', "<!DOCTYPE "... is not valid JSON

请问有人能帮我解决这个问题吗？

解决方法 #

问题核心是response.json()返回的Promise在解析失败时会拒绝，而你当前的代码没有处理这个拒绝状态。

修改后的代码如下：

function requests(url) {
  return fetch(url)
    .catch(function (error) {
      console.log("请求发送失败:", error);
      return null;
    })
    .then(function (response) {
      if (response == null) {
        return null;
      } else if (!response.ok) {
        if (response.status === 422 || response.status === 429) {
          return null;
        }
        console.log("请求返回错误状态码:", response.status);
        return null;
      }
      // 链式处理JSON解析，并捕获解析错误
      return response.json()
        .catch(function(parseError) {
          console.log("JSON解析失败:", parseError);
          return null;
        });
    });
}

关键调整： #

• 将response.json()纳入Promise链，通过.catch()捕获JSON解析失败的错误，避免未处理的拒绝状态
• 修正了代码中的笔误：response == 429改为response.status === 429，原写法会错误地将响应对象与数字比较
• 新增了错误日志，方便排查不同阶段的问题

这样修改后，请求发送失败、响应状态码异常、JSON解析失败这三类错误都会被妥善处理，不会留下未捕获的Promise拒绝。

内容的提问来源于stack exchange，提问作者Wt Riker