Nuxt Axios模块读取状态码：处理Rest API多成功状态码场景

嘿，刚好碰到过类似的场景，我来给你捋清楚怎么解决这个问题！

你现在用的this.$axios.$get()是Nuxt Axios提供的快捷封装方法，它会直接返回响应体（也就是response.data），所以拿不到状态码这类元信息。如果要获取完整的响应详情（包括状态码、响应头这些），你需要改用不带$前缀的原生Axios方法，比如this.$axios.get()。

改造后的代码示例 #

this.$axios.get('/Controller/?id=1')
  .then((fullResponse) => {
    // 从完整响应对象中取出状态码和响应体
    const { status, data } = fullResponse;

    if (status === 202) {
      // 处理202 Accepted的场景，比如data是"Queued"
      console.log('请求已进入队列', data);
      // 执行你的排队后操作
    } else if (status === 200) {
      // 处理200 OK的场景，比如data是令牌值
      console.log('请求成功，拿到令牌', data);
      // 执行令牌相关操作
    }
  })
  .catch((error) => {
    // 别忘了处理请求失败的情况
    console.error('请求出错啦', error);
  });

补充：全局拦截器处理（可选） #

如果你的项目里很多地方都需要区分这两种状态码，可以在Axios拦截器里统一处理，比如创建一个plugins/axios.js插件：

export default function ({ $axios }) {
  $axios.interceptors.response.use(
    (response) => {
      // 全局捕获响应状态码
      if (response.status === 202) {
        // 这里可以做全局提示或者标记
        console.log('提示：请求已排队处理');
      }
      return response;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
}

然后在nuxt.config.js里注册这个插件：

export default {
  plugins: ['~/plugins/axios.js']
}

简单说就是：用不带$的Axios方法拿到完整响应对象，从中读取status字段来区分200和202的情况，再结合响应体做对应的业务逻辑就好啦～

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