《axios拦截所有请求》

在使用 axios 发起 HTTP 请求时，我们常常需要对请求进行一些统一的处理，比如添加 token、记录请求日志等。通过 axios 的功能可以轻松实现这一需求。

解决方案

axios 提供了 request（请求）和 response（响应）两种。我们可以在发起请求之前对请求配置进行修改，在接收到响应之后对响应数据进行处理，以此来达到拦截所有请求的目的。

思路一：基础拦截设置

请求拦截

javascript
import axios from 'axios';</p>

<p>// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 根据实际接口地址设置
  timeout: 5000 // 超时时间
});</p>

<p>// 请求
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = <code>Bearer ${token};
    }
    // 可以添加其他操作，如加载动画显示等
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

响应拦截

javascript
// 响应
instance.interceptors.response.use(
response => {
// 对响应数据做点什么
// 如果接口返回的状态码为200，正常处理业务逻辑
if (response.status === 200) {
return response.data;
}
},
error => {
// 对响应错误做点什么
// 如果是401状态码，可能是token过期，可以跳转到登录页面
if (error.response && error.response.status === 401) {
// 跳转逻辑，假设使用vue - router
// this.$router.push('/login');
}
return Promise.reject(error);
}
);


思路二：基于环境变量配置不同的拦截逻辑

在开发中，不同环境（如开发环境、测试环境、生产环境）可能需要不同的拦截逻辑。
```javascript
import axios from 'axios';
import { isDev } from './env'; // 假设有一个获取环境标识的方法

const instance = axios.create();

if (isDev()) {
instance.interceptors.request.use(config => {
console.log('这是开发环境下的请求拦截');
// 开发环境下特有的操作
return config;
});
} else {
instance.interceptors.request.use(config => {
console.log('非开发环境下的请求拦截');
// 其他环境的操作
return config;
});
}
```
以上就是在项目中利用 axios 拦截所有请求的一些方法，可以根据实际需求灵活运用这些思路。