🔗 在JavaScript中获取Fetch HTTP响应的状态码(翻译)

本文说明了如何获取 Fetch HTTP 响应的状态码

获取 Fetch HTTP 响应的状态码

访问响应对象上的 status 属性以获取使用 fetch 方法发出的 HTTP 请求的状态代码。

response.status属性包含响应的 HTTP 状态代码，例如 200 表示成功响应或 500 表示服务器错误

async function makeRequest() {
  try {
    const response = await fetch("https://randomuser.me/api/")

    console.log("response.status: ", response.status) // 👉️ 200
    console.log(response)
  } catch (err) {
    console.log(err)
  }
}

makeRequest()

Alt text

我们等待调用 fetch 方法的响应并将结果分配给响应变量。

要获取 HTTP 响应的状态代码，请访问响应对象的 status 属性。

使用 `Promise.then()` 而不是 `async/wait`

这是一个使用 .then() 和 .catch() 而不是 async/wait 的示例。

function makeRequest() {
  fetch("https://randomuser.me/api/")
    .then((response) => {
      console.log("response.status: ", response.status) // 👉️ 200
      console.log(response)
    })
    .catch((err) => {
      console.log(err)
    })
}

makeRequest()

Alt text

响应对象上的 status 属性将仅为 HTTP 响应填充。

如果服务器根本没有响应，您遇到 CORS 错误或拼写错误的 URL，您将收到网络错误。

网络错误将运行 catch() 函数，并且不会填充 status 属性，因为它不是服务器 HTTP 响应。

使用 `fetch` 时处理错误的完整示例

这是使用 fetch 处理请求和错误的完整示例。

async function makeRequest() {
  try {
    const response = await fetch("https://randomuser.me/api/")

    console.log("status code: ", response.status) // 👉️ 200

    if (!response.ok) {
      console.log(response)
      throw new Error(`Error! status: ${response.status}`)
    }

    const result = await response.json()
    return result
  } catch (err) {
    console.log(err)
  }
}

makeRequest()