如何在 axios 中传递标头

Axios 是一个广受欢迎的用于浏览器和 nodejs 的 HTTP 库，它可以让我们很方便的与服务器端 API 进行数据交互。在实际开发中，我们通常需要在请求中添加一些请求头，以便服务器端能够正常识别请求并作出相应的响应。本文将介绍如何在 Axios 中传递标头。

使用 Axios 传递标头

Axios 提供了一种非常简单的方法来设置请求头。我们可以在创建 Axios 实例时传递一个配置对象，其中包含一些请求配置。其中最重要的就是 headers 配置项。该配置项是一个对象，其中包含要添加到请求的一组标头。例如，我们可以添加一个 Authorization 标头，其值为 Bearer token，这通常用于身份验证。

以下是使用 Axios 添加请求头的示例代码：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {'Authorization': 'Bearer token'}
});

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

在上面的示例中，我们创建了一个 Axios 实例 instance，并在其中添加了一个 Authorization 标头，其值为 Bearer token。随后，我们使用 instance 进行了一次 GET 请求，并在响应中打印了结果。如果请求成功，我们将看到服务器响应的结果。

在全局范围内设置 Axios 请求头

如果您希望在全局范围内设置 Axios 请求头，则可以使用 Axios 的默认配置进行设置。您可以使用 axios.defaults.headers 来设置全局请求头。以下是使用 Axios 全局请求头的示例代码：

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';

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

在上面的示例中，我们设置了 axios.defaults.baseURL 为我们的 API 地址，并添加了一个 Authorization 标头，其值为 Bearer token，并从服务器请求用户数据。请注意，这样设置会将默认请求头添加到每个请求中，包括 GET、POST、PUT 和 DELETE 等请求。

在请求中动态设置 Axios 请求头

有时，我们需要在每个请求中动态设置 Axios 请求头，这通常涉及到通过用户输入或其他方式获取请求头的值。在此情况下，我们需要通过 Axios 请求配置来设置请求头。

以下是在请求中动态设置 Axios 请求头的示例代码：

import axios from 'axios';

const headers = { 'Authorization': `Bearer ${token}` };

const config = {
  headers: headers,
  params: { id: 1 },
  timeout: 1000
};

axios.get('https://api.example.com/users', config)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们首先定义了一个请求头对象 headers，其中添加了一个 Authorization 标头，标头的值是从用户输入或其他方式获取的。随后，我们使用 config 对象设置了额外的请求参数，包括 params 和 timeout。最后，我们使用 axios.get 方法来发送请求，并将 config 对象作为第二个参数传递到方法中。

总结

传递 Axios 请求头非常简单。我们可以通过配置选项、默认配置和请求配置等多种方式设置请求头。在实际开发中，我们需要根据不同的场景选择合适的方法。如果您还没有使用 Axios 进行开发，则建议您尝试一下，它将成为您进行数据交互和与服务器端 API 进行交互的强大桥梁。