main.ts 添加axios.interceptors

如何使用axios拦截器

在前端开发中，我们经常会使用axios库来发送网络请求。axios是一个基于Promise的HTTP客户端库，可以用于浏览器和Node.js环境。它提供了一种简洁、直观的方式来发送HTTP请求，并且支持拦截器，允许我们在请求或响应发送之前或之后对它们进行一些处理。

什么是拦截器？

拦截器是axios提供的一种机制，用于在发送请求或响应之前或之后对它们进行处理。我们可以使用拦截器来添加公共的请求头、请求参数，或者在请求失败时进行统一的错误处理等。

添加拦截器

在使用axios发送请求之前，我们需要先添加拦截器。我们可以在main.ts文件中添加以下代码：

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

在上面的代码中，我们通过调用axios.interceptors.request.use方法来添加请求拦截器。在请求拦截器中，我们可以对请求配置进行修改，例如添加请求头信息。这里我们通过在请求头中添加Authorization字段来传递认证信息。

同样地，我们通过调用axios.interceptors.response.use方法来添加响应拦截器。在响应拦截器中，我们可以对响应数据进行处理，例如统一处理错误信息。

使用拦截器

添加了拦截器之后，我们可以正常使用axios发送请求了。下面是一个发送GET请求的示例：

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在发送请求时，拦截器会自动拦截并处理请求。我们可以在拦截器中进行一些公共的处理，而不需要在每个请求中都进行重复的操作。

总结

通过拦截器，我们可以在发送请求或响应之前或之后对它们进行处理。这样可以帮助我们简化代码、提高代码的可维护性，并且可以统一处理一些公共的逻辑，例如添加请求头、错误处理等。

在本文中，我们了解了如何使用axios拦截器，并通过示例代码演示了如何添加拦截器和发送请求。希望本文对你理解axios拦截器的使用有所帮助！