实现axios请求拦截器和响应拦截器添加请求头

作为一名经验丰富的开发者，我将为你介绍如何使用axios实现请求拦截器和响应拦截器来添加请求头。在开始之前，让我们先了解整个过程的流程。

流程概览

整个过程可以分为以下几个步骤：

  1. 创建axios实例
  2. 添加请求拦截器
  3. 添加响应拦截器
  4. 发送请求

下面我们将逐步讲解每个步骤需要做什么。

创建axios实例

首先，我们需要创建一个axios实例，它允许我们自定义一些默认配置。在创建实例之前，我们需要先安装axios，可以通过以下命令进行安装：

npm install axios

安装完成后，我们可以在代码中引入axios:

import axios from 'axios';

然后，我们可以创建一个axios实例，并设置一些默认配置，例如baseURL、timeout等：

const instance = axios.create({
  baseURL: ' // 设置请求的基础URL，可以根据实际情况进行修改
  timeout: 5000 // 设置请求超时时间
});

添加请求拦截器

接下来，我们需要添加请求拦截器，用于在发送请求之前进行一些操作，例如添加请求头。我们可以通过使用axios的interceptors属性来添加拦截器。

instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 添加请求头
    config.headers['Authorization'] = 'Bearer ' + getToken(); // 这里的getToken()需要根据实际情况来实现
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

在上面的代码中，我们使用了instance.interceptors.request.use方法来添加请求拦截器。请求拦截器中的config参数包含了请求的配置信息，我们可以在这个函数中对config进行修改，例如添加请求头。这里我们使用config.headers['Authorization']来添加一个名为Authorization的请求头，并设置其值为我们自定义的token。

添加响应拦截器

然后，我们需要添加响应拦截器，用于在接收到响应之后进行一些操作，例如处理错误信息。同样，我们可以通过使用axios的interceptors属性来添加拦截器。

instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

在上面的代码中，我们使用了instance.interceptors.response.use方法来添加响应拦截器。响应拦截器中的response参数包含了响应的数据，我们可以在这个函数中对response进行修改，例如获取返回的数据。这里我们简单地返回了响应数据的data字段。

发送请求

现在，我们已经完成了请求拦截器和响应拦截器的添加工作，接下来可以使用axios实例来发送请求了。我们可以使用instance来发起请求，例如：

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

上面的代码示例中，我们通过instance.get方法发送一个GET请求到/api/data接口，并在请求成功或失败后进行相应的处理。

总结

通过以上的步骤，我们成功地实现了axios请求拦截器和响应拦截器添加请求头的功能。使用请求拦截器和响应拦截器可以帮助我们在发送请求和处理响应的过程中进行一些通用的操作，例如添加请求头、处理错误信息等。这可以提高我们的开发效率并提升代码的可维护性。

希望本文对你有所帮助！如果有任何问题，欢迎提问。