axios request加请求头

在前端开发中，我们经常需要向服务器发送请求获取数据。而在发送请求时，有时候我们需要在请求中添加一些额外的信息，比如请求头。请求头可以携带一些关键信息，比如身份认证信息、数据类型等。在本文中，我们将介绍如何使用axios发送请求，并在请求中加上请求头。

什么是axios

axios是一个基于Promise用于浏览器和Node.js的HTTP客户端，它可以轻松地发送HTTP请求并处理响应。axios具有以下特性：

  • 支持Promise API
  • 可以拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 浏览器端支持防止CSRF(Cross-site request forgery)攻击

安装axios

在使用axios之前，我们需要先安装它。在终端中执行以下命令：

npm install axios

发送带请求头的GET请求

在使用axios发送GET请求时，我们可以通过设置headers属性来添加请求头。下面的示例演示了如何发送带请求头的GET请求：

axios.get('/api/products', {
  headers: {
    Authorization: 'Bearer my_token',
    'Content-Type': 'application/json'
  }
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在上述代码中，我们通过headers属性传入一个包含请求头信息的对象。在这个例子中，我们通过设置Authorization请求头来携带身份认证信息，并设置Content-Type请求头来指定请求的数据类型为JSON。

发送带请求头的POST请求

与GET请求类似，我们也可以在发送POST请求时添加请求头。下面的示例演示了如何发送带请求头的POST请求：

axios.post('/api/products', {
  name: 'Product 1',
  price: 10.99
}, {
  headers: {
    Authorization: 'Bearer my_token',
    'Content-Type': 'application/json'
  }
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在这个例子中，我们通过headers属性设置请求头，以便在POST请求中携带身份认证信息和指定数据类型为JSON。

使用拦截器添加请求头

除了在每次请求中手动设置请求头之外，axios还提供了拦截器功能，可以在请求或响应被发送之前拦截它们并进行一些处理。我们可以使用拦截器来自动添加请求头，以便在所有请求中都携带相同的请求头。

下面的示例演示了如何使用拦截器来自动添加请求头：

axios.interceptors.request.use(function (config) {
  config.headers.Authorization = 'Bearer my_token';
  config.headers['Content-Type'] = 'application/json';
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.get('/api/products')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在上述代码中，我们使用axios.interceptors.request.use方法添加了一个请求拦截器。在拦截器中，我们修改了config.headers对象来添加请求头。这样，每次发送请求时，都会自动添加指定的请求头。

序列图

下面是一个使用axios发送带请求头的GET请求的序列图示例：

sequenceDiagram
  participant Client
  participant Server

  Client->>Server: 发送GET请求
  Server->>Client: 返回数据

在序列图中，我们可以清楚地看到客户端向服务器发送请求，并等待服务器的响应。

状态图

下面是一个使用axios发送带请求头的POST请求的状态图示例：

stateDiagram
  [*] --> 发送请求
  发送请求 --> 添加请求头
  添加请求头 --> 发送请求
  发送请求 --> 接收响应
  接收响应 --> [*]

在状态图中，我们可以看到整个请求