vue 项目中如何使用 axios 拦截器

一、Axios 拦截器在 Vue 项目中扮演着关键角色，用于处理请求与响应。Axios 拦截器能够让我们在请求发出之前和响应到达之后执行代码、统一处理错误、展示全局的加载动画、添加公共参数等。例如，请求拦截器常用于在发送请求之前配置通用信息，如携带的token信息，而响应拦截器则用于处理返回数据之前的逻辑，如统一错误处理。

二、请求拦截器的使用

Axios 的请求拦截器让我们可以在请求发送出去之前修改请求的配置或执行一些操作。这适用于几乎所有的HTTP请求。

1. 设置请求头

   在发送请求前，我们常常需要设置统一的请求头，例如鉴权的token。

axios.interceptors.request.use(config => {

    // 为请求头添加token验证的Authorization字段
    config.headers.Authorization = window.localStorage.getItem('token');
    return config;
}, error => {
    return Promise.reject(error);
});

2. 添加统一的参数

   有时，我们可能需要为每个请求添加一些公共参数，比如API版本号。

axios.interceptors.request.use(config => {

    // 给所有请求添加一个自定义参数
    config.params = {
        ...config.params,
        'api_version': '1.0'
    };
    return config;
}, error => {
    return Promise.reject(error);
});

三、响应拦截器的使用

响应拦截器让我们可以在then或catch处理前对响应数据进行操作。

1. 统一处理响应

   响应拦截器经常用于全局处理来自后端的数据。

axios.interceptors.response.use(response => {

    // 对响应数据做些事，例如提取后端真正的有效数据
    return response.data;
}, error => {
    // 对响应错误做些事
    return Promise.reject(error);
});

2. 统一错误处理

   我们可以捕捉响应中的错误状态码，根据不同的状态码给出相应的处理。

axios.interceptors.response.use(response => {

    return response;
}, error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                // 返回 401 清除token信息并跳转到登录页面
                localStorage.removeItem('token');
                router.replace({
                    path: 'login',
                    query: {redirect: router.currentRoute.fullPath}
                });
        }
    }
    return Promise.reject(error.response.data);
});

四、在 Vue 项目中注册拦截器

将拦截器注册到Vue实例中，使其在项目中全局有效。

1. 创建axios实例

   在Vue项目中，我们通常会创建一个axios实例并配置基础信息。

import axios from 'axios';

const service = axios.create({
    baseURL: 'http://api.example.com',
    timeout: 5000
});
// 以下为设置拦截器
service.interceptors.request.use(
    config => {
        // 这里可以添加请求拦截器的内容
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);
service.interceptors.response.use(
    response => {
        // 这里可以添加响应拦截器的内容
        return response;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);
export default service;

2. 使用axios实例

   此后，你可以在Vue组件中使用这个配置好的axios实例发送请求。

import service from './service';

export default {
    data() {
        return {
            data: null
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            service.get('/getData').then(response => {
                this.data = response;
            });
        }
    }
};

五、拦截器的取消和错误处理

有时我们需要取消拦截器或者在发生错误时执行特定操作。

1. 取消拦截器

   我们可以通过axios提供的eject方法取消拦截器。

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

2. 错误处理

   在拦截器中对错误进行处理然后抛出，可以让组件catch到具体的错误信息。

axios.interceptors.response.use(function (response) {

    return response;
}, function (error) {
    // 处理错误的响应
    return Promise.reject(error);
});

六、实践建议

合理使用拦截器可以极大地优化代码结构和处理流程。

• 封装统一的http请求模块，利用拦截器管理所有请求的预处理和后处理。
• 维护良好的错误管理策略，使前端能够友好地提示用户或记录日志。
• 性能优化，可以在请求拦截器中添加请求开始的时间，在响应拦截器中计算整个请求的耗时。

正确且有效的运用Axios拦截器，不仅可以让Vue项目中的API请求更加统一和结构清晰，还可以提高代码的重用性和维护性。在处理复杂项目时，Axios拦截器是确保流畅用户体验的重要工具。

相关问答FAQs：

Q: 在 Vue 项目中，如何利用 axios 拦截器来处理请求和响应？

A: 使用 axios 拦截器是非常方便的，可以用于全局的请求和响应的处理。首先，在 mAIn.js 中导入 axios 和创建一个实例。然后，使用 axios.interceptors.request.use() 方法来添加请求拦截器，可以在这个拦截器中对请求进行一些处理，例如添加请求头信息、处理请求错误等。同时，可以使用 axios.interceptors.response.use() 方法来添加响应拦截器，可以在这个拦截器中对响应进行一些处理，例如处理响应数据、统一处理错误等。通过这种方式，可以很方便地对所有的请求和响应进行统一的处理。

Q: 如何在 Vue 项目中使用 axios 拦截器来处理请求超时？

A: 在 Vue 项目中，可以通过使用 axios 拦截器来处理请求超时。首先，在请求拦截器中设置请求的超时时间，可以使用 axios.defaults.timeout 来设置全局的超时时间。然后，可以在拦截器的错误处理中判断请求是否超时，如果超时则进行相应的处理，例如重新发送请求或者提示用户请求超时。同时，可以利用响应拦截器来统一处理请求超时的错误，例如提示用户请求超时或者进行相应的重试操作。通过这种方式，可以很好地处理请求超时的情况。

Q: 如何在 Vue 项目中使用 axios 拦截器来处理请求的身份验证？

A: 在 Vue 项目中，可以通过使用 axios 拦截器来处理请求的身份验证。首先，在请求拦截器中设置请求的身份验证信息，可以通过在请求头中添加 Token 或者其他身份验证信息来进行身份验证。然后，可以在拦截器的错误处理中判断是否请求身份验证失败，如果失败则进行相应的处理，例如重定向到登录页面或者提示用户身份验证失败。同时，可以利用响应拦截器来统一处理请求的身份验证错误，例如判断是否返回了未授权的错误码，如果是则进行相应的处理，例如重新登录或者提示用户重新授权。通过这种方式，可以很好地处理请求的身份验证问题。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。