前端axios请求header携带参数

原创

mob649e81576de1 2023-12-22 06:46:46 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81576de1的原创作品，请联系作者获取转载授权，否则将追究法律责任

前端axios请求header携带参数

在前端开发中，我们经常需要与后端进行数据交互。而使用axios库是一种非常常见的方式，它是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。在实际开发中，我们经常需要在请求的header中携带一些参数，以便于后端进行验证、授权等操作。本文将介绍如何使用axios发送请求并在header中携带参数。

安装axios

在开始之前，我们需要先安装axios。可以使用npm或者yarn进行安装，如下所示：

npm install axios

或者

yarn add axios

安装完成后，我们就可以在代码中使用axios了。

发送请求并携带参数

使用axios发送请求非常简单，只需要调用axios的方法即可。可以通过传入一个配置对象来指定请求的各种参数，其中就包括headers参数。下面是一个发送GET请求并在header中携带参数的示例：

import axios from 'axios';

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

在上面的代码中，我们通过传入一个配置对象作为第二个参数来设置请求的headers。headers是一个对象，其中的键值对表示header的名称和值。在这个示例中，我们设置了Content-Type为application/json，Authorization为Bearer token。根据具体的需求，我们可以自行添加其他的header参数。

如果我们需要发送POST请求，可以使用axios的post方法，并传入一个包含headers的配置对象，示例如下：

import axios from 'axios';

axios.post('/api/data', data, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中，我们还需要传入一个data参数，用于发送POST请求的数据。

使用拦截器统一设置header参数

如果我们的应用中有多个请求需要携带相同的header参数，我们可以使用axios的拦截器来实现统一设置。拦截器可以在发送请求之前或者响应之后对请求进行拦截和处理。下面是一个使用拦截器统一设置header参数的示例：

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers['Content-Type'] = 'application/json';
  config.headers['Authorization'] = 'Bearer token';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

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

在上面的示例中，我们通过axios的interceptors对象的request属性来添加一个请求拦截器。拦截器是一个函数，接受一个config参数，该参数包含了请求的配置对象。我们可以在拦截器中修改config对象的headers属性，从而设置header参数。在示例中，我们设置了Content-Type为application/json，Authorization为Bearer token。