通过 Fetch 处理不良响应

Question

我有以下代码：

function handleSubmit() {
    fetch(`/api/v1/teams`, {
      body: JSON.stringify({
        name: nameRef.current.value
      }),
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'content-type': 'application/json'
      }
    }).then(response => {
      return response.json()
    }).then(data => {
      
    })
  }

其目的是访问 API 端点并获取响应中的数据（在最后一个

then

块中）。这一切都很好。

但是，相关端点有时会返回 400 错误代码，并且该实例中的 JSON 包含错误。然而，似乎当我到达最后一个数据块时，我无法再读取

response.ok

。

处理这个问题的理想方法是什么？

Answer 1

正如 @jonsharpe 所暗示的，Next 中客户端组件中的函数可以使用异步/等待：

async function handleSubmit() {
    const response = await fetch(`/api/v1/teams`, {
      body: JSON.stringify({
        name: nameRef.current.value
      }),
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'content-type': 'application/json'
      }
    })
    const json = await response.json()
    if (!response.ok) {
      setErrors(json)
    }
  }