Typescript（或 Javascript）Fetch API async/await 错误处理

Question

我想使用 async/awayt 语法、Fetch API 并希望实现以下行为：

如果响应不是 200，则记录响应，不要抛出任何内容并返回 null。如果响应为 200，则返回响应。

但！Fetch API 对与 404、505 或 200 不同的所有内容抛出异常，最后我得到了一个丑陋的结构，如下所示：

...
try{
 let response = await fetch(url, {method: 'GET', mode: 'cors'});
 if(response.status != 200){
    console.log('Failed to get what I want, got status: ' + response.status);
    return null;
 }
catch(e){
  console.log('error bla bla');
  return null;
}
...

有没有更优雅的方法来实现相同的目标？

Answer 1

来自MDN：

当遇到网络错误或 CORS 在服务器端配置错误时， fetch() 承诺将拒绝并返回 TypeError，尽管这通常意味着权限问题或类似问题——例如，404 不构成网络错误。

和：

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

正如 Garry 在他的回答中所说，我建议创建一个中间件来处理不成功的响应，或者如果状态不是 200，或者状态不是 200，则抛出异常response.ok。

示例（使用https://httpstat.us/）：

async function getData() {
  try {
    let response = await fetch('https://httpstat.us/401', {
      method: 'GET',
      mode: 'cors'
    });
    if (!response.ok) throw response.statusText;
    console.log('Dataaa');

    return response
  } catch (e) {
    console.error(e);
    return null
  }
}

getData()

Answer 2

Fetch 不会根据状态代码抛出异常。如果出现网络错误（例如无法到达服务器），它将抛出异常。这是在 Fetch 规范中定义的。

\n\n

这是从 Fetch 获取各种状态代码的示例

\n\n

\r\n

\r\n

async function getit(status) {\r\n  let url = \'https://httpstat.us/\' + status\r\n  try {\r\n    let response = await fetch(url, {\r\n      method: \'GET\',\r\n      mode: \'cors\'\r\n    });\r\n    if (response.ok) {\r\n      console.log("Got what we wanted")\r\n    } else {\r\n      console.log(\'Failed to get what I want, got status: \' + response.status);\r\n    }\r\n    return "okay";\r\n\r\n  } catch (e) {\r\n    console.log(\'A real error!\');\r\n    return "network error";\r\n  }\r\n}\r\n\r\ngetit(200).then(console.log)\r\n\r\n// error codes\r\ngetit(400).then(console.log)\r\ngetit(503).then(console.log)\r\ngetit(401).then(console.log)

\r\n

\r\n

\r\n

\n\n

只要它收到 HTTP 响应，就不会抛出异常。

\n\n

（您的代码中确实有一个拼写错误 \xe2\x80\x94 您缺少 上的右括号if (response.status != 200) {，但这应该会导致语法错误而不是被拒绝的承诺）

\n