本文共 1701 字，大约阅读时间需要 5 分钟。

Axios 拦截器实用指南

一、Axios 拦截器简介

Axios 拦截器是一种在HTTP 请求和响应处理过程中，可以自定义操作的机制。它由两个部分组成：请求拦截器和响应拦截器。通过这些拦截器，我们可以在请求发送之前或在数据返回后对数据进行加工或状态管理。

二、请求拦截器的功能

请求拦截器主要用于处理发送请求时的逻辑操作，常见的包括：

三、响应拦截器的功能

响应拦截器则用于处理返回数据后的逻辑操作，主要常见场景包括：

四、拦截器的核心实现

在实际项目中，拦截器的实现通常包括以下几个步骤：

import axios from 'axios'; // 创建请求拦截器axios.interceptors.request.use((config) => {    // 示例：从 localStorage 获取 token    const token = localStorage.getItem('token');    if (token) {        config.headers.Authorization = `Bearer ${token}`;    }    return config;});

2. 处理响应数据：

axios.interceptors.response.use((response) => {    // 示例：清除loading弹窗    // 其他处理逻辑    return response;});

五、实际应用示例

基于以上理论，以下是项目中常见的拦截器实现场景：

1. 获取用户授权信息

// 加载用户信息const user = JSON.parse(localStorage.getItem('user'));if (user) {    axios.defaults.headers.common['Authorization'] = `Bearer ${user.token}`;}

2. dizzy loading 弹窗

axios.interceptors.request.use((config) => {    constiyim = localStorage.getItem('ismu');    if (iyim === '1') {        config.headers.Authorization = 'Bearer ' +onnement;        Toast.loading({            message: '加载中...'        });    }    return config;});

3. 错误处理

axios.interceptors.response.use((error) => {    if (error.response.status === 401) {        localStorage.removeItem('token');        // 调整页面状态        return null;    } else {        showErrorToast(error.message);        // 其他处理逻辑    }});

六、优化建议

3. 减少代码复杂度：避免过多嵌套，保持逻辑清晰。
4. 统一处理异常：确保不同错误类型都有相应的处理方式。
5. 及时清除loading弹窗：避免长时间加载导致用户体验下降。

通过合理运用axios拦截器，可以显著提升项目的用户体验和数据处理的统一性，实现更稳健的网络请求管理。