面试题：Vue中Axios请求拦截与响应处理

设置请求拦截器添加token：
- 在Vue应用中，通常在main.js文件里配置Axios拦截器。首先引入Axios，然后使用axios.interceptors.request.use方法来添加请求拦截器。
- 假设token存储在localStorage中，代码示例如下：

import axios from 'axios';
// 创建Axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

设置响应拦截器处理不同HTTP状态码的错误情况：
- 使用axios.interceptors.response.use方法来添加响应拦截器。在这个拦截器中，可以根据不同的HTTP状态码进行相应的错误处理。
- 代码示例如下：

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    const status = error.response.status;
    if (status === 401) {
      // 处理401错误，例如跳转到登录页面
      console.error('401错误：未授权，请重新登录');
      // 假设使用Vue Router，可进行如下操作
      // router.push('/login');
    } else if (status === 500) {
      console.error('500错误：服务器内部错误');
    }
    return Promise.reject(error);
  }
);

在实际应用中，还可以根据具体业务需求，对不同的状态码进行更详细的处理，比如显示友好的错误提示给用户等。同时，以上代码中的process.env.VUE_APP_BASE_API是一个环境变量，需根据实际项目情况进行配置。router需先引入并正确配置Vue Router。

星途面试题库

面试题：Vue中Axios请求拦截与响应处理

知识考点

面试题答案