javascript - Typescript(或 Javascript)Fetch API 异步/等待错误处理

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 :

A fetch() promise will reject with a TypeError when a network error is encountered or CORS is misconfigured on the server side, although this usually means permission issues or similar — a 404 does not constitute a network error, for example.

还有:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

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

示例(使用 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()