axios 拦截器怎么在 vue 项目中使用

Axios 拦截器在 Vue 项目中的使用主要体现在请求拦截、响应拦截以及错误处理三个核心方面。通过配置请求拦截器，可以在发送请求之前对请求数据进行处理或添加必要的HTTP头部信息；通过配置响应拦截器，可以在接收到响应之后，但还未处理响应数据之前进行一些操作，如根据状态码对响应进行统一处理；错误处理则是对请求或响应异常情况进行统一处理，优化用户体验。其中，请求拦截器的使用尤为关键，它允许我们在发送请求到服务器之前进行一系列操作，如设置通用请求头、添加token验证等，这对于保证应用的数据安全性及接口的有效权限验证至关重要。

一、配置AXIOS实例

配置Axios实例是使用Axios拦截器的第一步，它允许我们为不同的服务端接口配置不同的请求参数，如基础URL、超时时间等。创建一个Axios实例，可以让我们在一个应用中针对不同的服务端接口应用不同的配置，从而提高代码的复用性和模块化。

首先，安装Axios，然后在项目中创建一个专用的axios配置文件，例如http.js，在这个文件中导入Axios库并创建一个Axios实例：

import axios from 'axios';

const http = axios.create({
  baseURL: 'http://your-api-url.com/api',
  timeout: 10000, // 请求超时时间
});
export default http;

二、请求拦截器的配置

请求拦截器的配置允许我们在请求发送到服务器之前对请求数据做一些前置处理，如加入认证信息等。

在http.js文件中，配置请求拦截器：

http.interceptors.request.use(

  config => {
    // 在发送请求之前做些什么
    // 例如：如果存在token，将其添加至请求头中
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

三、响应拦截器的配置

响应拦截器允许我们在接收到响应数据之前进行一系列操作，例如统一错误处理、根据状态码进行重定向等。

配置响应拦截器：

http.interceptors.response.use(

  response => {
    // 对响应数据做点什么
    // 可以在这里根据服务器返回的状态码进行一些操作
    if (response.status === 200) {
      // 对200状态码做些什么
      return response.data;
    } else {
      // 对非200状态码做些什么
      return Promise.reject(response);
    }
  },
  error => {
    // 对响应错误做点什么
    // 可以在这里根据错误的http状态码做一些统一的处理
    return Promise.reject(error);
  }
);

四、在VUE中使用配置好的AXIOS实例

在Vue组件中使用配置好的Axios实例进行数据请求相对直接使用Axios库更加灵活和方便。首先，将配置好的http.js导入到需要进行数据请求的Vue组件中：

import http from '@/path/to/http.js';

export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      http.get('/path/to/api')
        .then(response => {
          this.data = response;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
  },
};

通过这样的配置和使用方法，Axios拦截器能够在Vue项目中发挥出强大的功能，帮助我们实现请求和响应过程中的高度定制化处理，提高开发效率和用户体验。

相关问答FAQs：

1. 拦截器是什么，为什么要在 Vue 项目中使用拦截器？
拦截器是 axios 提供的一种功能，它允许我们在发送请求或接收响应之前对它们进行处理和拦截。通过在 Vue 项目中使用拦截器，我们可以在请求发送之前添加统一的认证信息、对请求进行统一的错误处理、对响应进行统一的数据转换等操作，从而提高代码的复用性和可维护性。

2. 如何在 Vue 项目中使用拦截器？
在 Vue 项目中使用拦截器非常简单。首先，在你的项目中安装 axios 模块：npm install axios。然后，在需要使用拦截器的地方引入 axios：import axios from 'axios'。接下来，你可以使用 axios.interceptors.request.use 方法来添加请求拦截器，使用 axios.interceptors.response.use 方法来添加响应拦截器。在拦截器中，你可以通过对请求和响应进行处理来满足你的需求。

3. 有哪些常见的拦截器使用场景？
拦截器在 Vue 项目中有很多实用的场景。一种常见的场景是在请求中添加统一的认证信息。通过在请求拦截器中添加认证头部，我们可以确保每个发送的请求都带有正确的认证信息，提高了项目的安全性。另一种常见的场景是在响应中进行统一的错误处理。通过在响应拦截器中对返回的数据进行判断，我们可以统一处理错误的返回信息，并且对错误进行提示或者进行重定向操作，提升了用户体验。除此之外，拦截器还可以用来处理请求的超时重试、请求的缓存、对请求和响应进行统一的数据处理等等。拦截器功能强大且灵活，可以根据实际需求进行定制化的使用。

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