Axios拦截器

Axios 拦截器是一项强大的功能，它允许你在请求或响应被处理之前拦截它们，从而实现对它们的修改、日志记录、身份验证等功能。本文将详细介绍如何设置和使用 Axios 拦截器。

请求拦截器

请求拦截器允许你在请求被发送到服务器之前对其进行处理。你可以添加身份验证令牌、修改请求头、记录日志等。

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    // 例如，添加身份验证令牌到请求头
    const token = localStorage.getItem('authToken');
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    // 也可以在这里记录日志
    console.log('Request Interceptor:', config);
    // 最后返回配置对象
    return config;
}, error => {
    // 对请求错误做些什么
    // 例如，可以返回 Promise.reject(error) 来处理错误
    return Promise.reject(error);
});

响应拦截器

响应拦截器允许你在服务器响应到达客户端之前对其进行处理。你可以统一处理错误响应、修改响应数据、记录日志等。

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做些什么
    // 例如，可以在这里检查响应状态码
    if (response.status === 200) {
        // 可以在这里记录日志
        console.log('Response Interceptor:', response);
        // 最后返回响应对象
        return response;
    } else {
        // 可以在这里处理非 2xx 的响应
        return Promise.reject(new Error(`Error: ${response.status}`));
    }
}, error => {
    // 对响应错误做些什么
    // 例如，可以在这里统一处理 401 未授权错误
    if (error.response && error.response.status === 401) {
        // 可以跳转到登录页面，或者执行其他操作
        window.location.href = '/login';
    }
    // 最后返回 Promise.reject(error) 来处理错误
    return Promise.reject(error);
});

移除拦截器

在某些情况下，你可能需要移除之前添加的拦截器。你可以使用拦截器返回的 ID 来移除它。

const myRequestInterceptor = axios.interceptors.request.use(config => {
    // ... 请求拦截器逻辑
    return config;
});

// 移除请求拦截器
axios.interceptors.request.eject(myRequestInterceptor);

const myResponseInterceptor = axios.interceptors.response.use(response => {
    // ... 响应拦截器逻辑
    return response;
});

// 移除响应拦截器
axios.interceptors.response.eject(myResponseInterceptor);

注意：eject 方法在 Axios 的某些版本中可能不被支持。在这种情况下，你需要自己维护一个拦截器的引用，并通过 axios.interceptors.request.delete(interceptorId) 或 axios.interceptors.response.delete(interceptorId) 来移除它（但请注意，delete 方法并不是 Axios API 的一部分，这里只是为了说明概念；实际上，你应该使用你自己的逻辑来跟踪和移除拦截器）。然而，在大多数情况下，你不需要手动移除拦截器，除非你在运行时动态地添加和移除它们。

示例：结合使用请求和响应拦截器

下面是一个结合使用请求和响应拦截器的示例，展示了如何为所有 Axios 请求添加身份验证令牌，并统一处理错误响应。

// 添加请求拦截器以添加身份验证令牌
axios.interceptors.request.use(config => {
    const token = 'your-auth-token'; // 假设这是你的身份验证令牌
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
});

// 添加响应拦截器以统一处理错误
axios.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response;
    },
    error => {
        if (error.response) {
            // 服务器返回了状态码，且状态码触发了错误处理
            switch (error.response.status) {
                case 401:
                    // 未授权，可以跳转到登录页面
                    window.location.href = '/login';
                    break;
                case 403:
                    // 禁止访问，可以显示一个错误消息
                    alert('Access Denied');
                    break;
                // 其他状态码处理...
                default:
                    break;
            }
        } else if (error.request) {
            // 请求已经发出，但没有收到响应
            console.error('No response received:', error.request);
        } else {
            // 其他错误（如请求配置错误）
            console.error('Error in setting up request:', error.message);
        }
        // 返回 Promise.reject(error) 来处理错误
        return Promise.reject(error);
    }
);

// 现在，你可以使用 axios 发送请求，拦截器将自动生效
axios.get('/some-endpoint')
    .then(response => {
        console.log('Response:', response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

本文地址：https://www.tides.cn/p_js-axios-interceptors