Vue.js axios响应拦截如何获取返回状态码

Vue.js 是一个流行的 JavaScript 框架，而 axios 可以让我们以简单的方式使用 AJAX 请求。在这个过程中，我们可能需要拦截 axios 响应并获取返回状态码。

为了在 Vue.js 项目中实现 axios 响应拦截器，我们需要按照以下步骤：

安装 axios

首先，我们需要安装 axios。您可以使用 npm 通过以下方式安装 axios。

npm install axios

添加 axios 响应拦截器

接下来，我们需要添加 axios 响应拦截器。在拦截器中，我们可以检查返回的状态码，并根据需要采取适当的行动。

以下代码示例是一个简单的 axios 响应拦截器。

import axios from 'axios';

axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      console.log('Request Success');
    }
    return response;
  },
  error => {
    if (error.response.status === 401) {
      console.log('Request Unauthorized');
    } else if (error.response.status === 404) {
      console.log('Request Not Found');
    } else {
      console.log('Request Failed');
    }
    return Promise.reject(error);
  }
);

在上面的示例中，我们首先检查响应状态码是否为 200（即成功）并输出一条成功日志。接下来，我们检查状态码是否为 401（即未授权）或 404（即未找到）并输出错误日志。

最后，我们返回一个 Promise.reject(error)，以确保响应拦截器也会处理错误情况。

示例说明

以下是两个使用 axios 响应拦截器的示例：

示例1：使用 axios 拦截器判断响应状态并弹出提示框

import axios from 'axios';
import { Message } from 'element-ui';

axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return response;
    } else {
      Message.warning('响应错误，请稍后重试');
    }
  },
  error => {
    Message.error('请求失败，请稍后重试');
    return Promise.reject(error);
  }
);

在上面的示例中，如果响应状态码为 200，则我们返回响应对象。如果状态码为其他，则使用 element-ui 库中的 Message 组件弹出提示框。

如果请求失败，我们仍然将错误对象返回给调用方，并在响应拦截器上输出一条错误日志。

示例 2：使用 axios 拦截器进行接口响应格式转换

import axios from 'axios';

axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      const { data } = response;
      if (data.success) {
        return data.result;
      } else {
        return Promise.reject(data.message);
      }
    }
    return response;
  },
  error => {
    return Promise.reject(error.message);
  }
);

在上面的示例中，如果响应状态码为 200，则我们首先从响应对象中获取 data 属性。然后我们检查 data.success 是否为 true。如果是，我们返回 data.result。否则，我们返回 Promise.reject(data.message)，其中包含的就是服务器返回的错误消息。

如果请求失败，则将错误消息返回给调用方。

这些示例说明了如何使用 axios 响应拦截器获取返回状态码。了解这些技巧可以帮助您更好地管理 Vue.js 项目中的 API 请求。