Axios 如何实现全局拦截与请求独享响应拦截

在前端开发中，Axios 是一款广泛使用的 HTTP 库，它提供了强大的拦截功能，能极大地提高开发效率与代码的可维护性。其中，全局拦截与请求独享响应拦截是两个重要的特性。

首先来看全局拦截。Axios 提供了 interceptors 属性，通过它可以很方便地实现全局请求和响应拦截。对于请求拦截，我们可以在请求发送前对请求进行统一处理，比如添加通用的请求头。示例代码如下：

axios.interceptors.request.use(config => {
    config.headers['Authorization'] = 'Bearer'+ localStorage.getItem('token');
    return config;
}, error => {
    return Promise.reject(error);
});

这段代码在每次请求前，都会检查本地存储中的 token 并添加到请求头中。如果出现错误，会返回一个被拒绝的 Promise。

响应拦截同样强大，它能在接收到响应后对数据进行统一处理。例如，我们可以对所有响应进行错误处理：

axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response.status === 401) {
        // 处理未授权的情况
        console.log('未授权，请重新登录');
    }
    return Promise.reject(error);
});

这样，当服务器返回 401 状态码时，我们就能进行相应的处理。

而请求独享响应拦截则为特定的请求提供了更灵活的处理方式。有时候，我们只需要对某一个请求进行特殊的响应处理。这时，可以在发送请求时传入一个 interceptors 配置对象。

axios.get('/api/special', {
    interceptors: {
        response: {
            use(response) {
                // 对这个特定请求的响应进行特殊处理
                return response.data.specialField;
            },
            error(error) {
                // 处理这个请求的错误
                return Promise.reject(error);
            }
        }
    }
})
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error(error);
});

通过这种方式，我们可以针对某个具体请求定制响应处理逻辑，而不会影响到其他请求。

Axios 的全局拦截与请求独享响应拦截功能为前端开发提供了丰富的灵活性，无论是统一处理请求和响应，还是针对特定请求进行个性化处理，都能轻松实现，帮助开发者打造更健壮、高效的应用程序。