如何在axios中实现“before”回调

在使用axios进行HTTP请求时，实现“before”回调可以让我们在发送请求前执行某些特定操作，例如设置请求头、记录日志、校验参数等。axios本身提供了一种叫拦截器（interceptors）的机制，可以用来实现“before”回调的功能。

Axios Interceptors（拦截器）

拦截器允许我们在请求发出之前（request interceptor）和响应返回之后（response interceptor）执行代码。

设置请求拦截器

以下是如何设置一个请求拦截器的步骤：

1. 导入axios模块。
2. 使用axios.interceptors.request.use方法注册一个请求拦截器。
3. 在该方法内部，你可以进行你需要的“before”操作。

示例代码：

javascript
import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('即将发送请求，时间：', Date.now());
    config.headers['Authorization'] = 'Bearer your-token-here';  // 示例：动态设置请求头

    // 可以根据条件判断是否修改config或者直接返回错误
    if (!config.url.includes('api')) {
        return Promise.reject('Invalid API URL');
    }

    return config;  // 必须返回配置
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 然后我们就可以在应用的其他地方正常使用axios来发请求
axios.get('/user?ID=12345')
    .then(function (response) {
        console.log('响应数据:', response);
    })
    .catch(function (error) {
        console.log('发生错误:', error);
    });

解释

1. 导入axios：首先引入axios库。
2. 创建请求拦截器：
   • 在请求发送前，拦截器可以对config对象进行操作，比如添加请求头、检查或修改请求的URL等。
   • 拦截器可以返回修改后的config对象，或在发现问题时通过返回Promise.reject(error)来中断请求。
3. 错误处理：如果在请求配置阶段有错误，可以在拦截器的第二个函数参数中处理这些错误。

这种方法非常灵活，可以在请求真正发出之前，实现各种自定义的逻辑和校验。