javascript - 使用异步等待获取失败时如何捕获状态代码

Question

上下文

我将从对我的Promises请求之一使用oj​​it_a转换为async/await(我在fetch内部使用该请求，但这对于理解我的问题不是必需的)。

使用以下代码，如果请求失败，我可以根据响应的状态代码向最终用户提供错误消息。

fetch("http://localhost:8000/api/v1/book", {
  headers: {
    Accept: "application/json"
  }
}).then(response => {
  if (!response.ok) {
    if (response.status === 429) {
      // displaying "wow, slow down mate"
    } else if (response.status === 403) {
      // displaying "hm, what about no?"
    } else {
      // displaying "dunno what happened \_(ツ)_/¯"   
    }

    throw new Error(response);
  } else {
    return response.json();
  }
}).then(books => {
  // storing my books in my Vuex store
})
.catch(error => {
  // storing my error onto Sentry
});

问题

使用 async/await，这就是我的代码现在的样子:

try {
  const response = await fetch("http://localhost:8000/api/v1/book", {
    headers: {
      Accept: "application/json"
    }
  });

  const books = await response.json();

  // storing my books
} catch(exception) {
  // storing my error onto Sentry
}

问题

如果使用 async/await失败，如何确定响应返回的状态码？

如果我以错误的方式使用它，那就不要犹豫，以更好的方式纠正我。

注释

我做了一个JSFiddle来实时测试该问题。随时更新。

Vuex action

Answer 1

它将与then回调中的代码完全相同:

try {
  const response = await fetch("http://localhost:8000/api/v1/book", {
    headers: {
      Accept: "application/json"
    }
  });
  if (!response.ok) {
    if (response.status === 429) {
      // displaying "wow, slow down mate"
    } else if (response.status === 403) {
      // displaying "hm, what about no?"
    } else {
      // displaying "dunno what happened \_(ツ)_/¯"   
    }
    throw new Error(response);
  }
  const books = await response.json();

  // storing my books
} catch(exception) {
  // storing my error onto Sentry
}