NuxtJs中如何获取useFetch的响应状态码？

要获取useFetch请求的响应状态码，可针对成功、错误两种场景分别处理：

1. 成功响应时获取状态码 #

useFetch返回的结果里，response属性包含完整的响应对象，直接从中读取status字段即可：

const { data, error, response } = await useFetch(url, options);

if (!error.value) {
  const statusCode = response.value?.status;
  console.log('响应状态码:', statusCode);
  console.log('返回数据:', data.value);
}

2. 错误响应时获取状态码 #

当请求返回4xx/5xx这类错误状态码时，error.value会携带包含response属性的对象，从中提取状态码：

const { data, error, response } = await useFetch(url, options);

if (error.value) {
  const statusCode = error.value?.response?.status;
  console.error('错误状态码:', statusCode);
  console.error('错误信息:', error.value.message);
  
  // 按状态码做针对性处理
  if (statusCode === 403) {
    // 处理权限不足逻辑
  } else if (statusCode === 404) {
    // 处理资源不存在逻辑
  }
}

适配你原有链式调用的写法 #

如果习惯用.then()链式写法，可修改为：

useFetch(url, options).then((res) => {
  const data = res.data.value;
  const error = res.error.value;
  const response = res.response.value;

  if (error) {
    const statusCode = error.response?.status;
    console.error('错误状态码:', statusCode);
    console.error('错误详情:', error);
  } else {
    const statusCode = response?.status;
    console.log('响应状态码:', statusCode);
    console.log('返回数据:', data);
  }
}).catch((err) => {
  // 捕获网络层面异常（如请求超时、DNS失败）
  const statusCode = err.response?.status;
  console.error('请求出错，状态码:', statusCode);
  console.error('错误信息:', err);
});

注意：若遇到网络层面的异常（如请求无法发送），error.response可能为undefined，需用可选链?.避免报错。

内容的提问来源于stack exchange，提问作者fudo