使用Axios来设置请求头（headers）的方法_axios header

几乎所有在用户浏览器中可见的东西都是通过HTTP传输的，所以这些网络请求在互联网通信中发挥着重要作用。HTTP请求的一个关键组成部分是标头。HTTP请求头被用来提供关于请求的额外信息。例如，关于请求的信息、发件人以及发件人希望如何与收件人建立联系的细节。

Axios是一个灵活而强大的解决方案，用于提出HTTP请求，并拦截来自Node.js应用程序和浏览器的HTTP响应。但是，Axios还能做得更多。除了你期待的HTTP客户端的标准CRUD功能外，Axios还提供了一系列其他有用的内置功能，如配置默认值、错误处理、请求取消和自动将JavaScript对象序列化为JSON。

在这篇文章中，我们将探讨Axios用于设置API调用的请求头的不同方式。

安装Axios

对于本文中使用的例子，我们将从CDN上安装Axios。它也可以用npm、Yarn或Bower安装。

下面是每种方法的脚本或命令。

//via cdn
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
// via npm
$ npm install axios
 
// via yarn
$ yarn add axios
 
// via bower
$ bower install axios
 

让我们探讨一下我们可以用Axios为API调用设置请求头的不同方法。

• 传递一个对象参数
• 创建一个特定的Axios实例
• 使用Axios拦截器

传递一个对象参数

诸如 post() 和 get() 等 Axios 方法使我们能够在请求中附加头信息，方法是将头信息对象作为GET请求的第二个参数和POST请求的第三个参数。

让我们来看看这对单个和多个请求是如何工作的。

单个请求

POST 和 GET 请求分别用于创建或检索一个资源。下面是一些一次性或单个请求的例子。

首先，我们声明 config 对象，其中包含 headers 对象，它将在提出请求时作为一个参数提供。我们还声明了一个 api endpoint 和一个 data 对象。

const config = {
  headers:{
    header1: value1,
    header2: value2
  }
};
const url = "api endpoint";
 
const data ={
  name: "Jake Taper",
  email: "taperjake@gmail.com"
}
 

我们可以使用 GET 请求从 API 端点 url 检索 config 对象。

axios.get(url, config)
  .then(res=> console.log(res))
  .catch(err=> console.log(err))
 

在这个例子中，我们把 API 端点 url 作为第一个参数传入，把 config 对象作为第二个参数。

我们可以使用 POST 请求将 data 对象传递给 API 端点 url 。

 axios.post(url, data, config)
  .then(res => console.log(res))
  .catch(err => console.log(err))
 

在这个例子中，我们把 API 端点 url 作为第一个参数，把 data 对象作为第二个参数，把 config 对象作为第三个参数。

多重请求

在某些情况下，可能需要为多个或后续请求自动设置头文件。我们可以通过指定配置默认值来解决这个问题。

这段代码为所有请求设置了授权头信息。

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')`;
 

这段代码为所有 post 的请求设置授权头。

 
axios.defaults.headers.post['Authorization'] = `Bearer ${localStorage.getItem('access_token')`;
 

创建一个特定的Axios实例

我们还可以通过创建一个特定的 Axios 实例来为 API 调用设置请求头。

我们可以使用 require 来创建一个新的Axios实例。

const axios = require('axios')
 

然而，这个选项不允许我们传入配置。为了正确设置每个请求的头信息，我们可以使用axios.create创建一个Axios实例，然后在该实例上设置一个自定义配置。

let reqInstance = axios.create({
  headers: {
    Authorization : `Bearer ${localStorage.getItem("access_token")`
    }
  }
})

我们可以在每次使用这个特定实例进行请求时重复使用这个配置。

当我们使用 reqInstance 进行请求时，授权头就会被附上。

reqInstance.get(url);
 

使用Axios拦截器

我们也可以使用 Axios 拦截器来为 API 调用设置请求头。Axios 拦截器是由 Axios 调用的函数。拦截器可以用来在请求传输之前改变它，或者在响应交付之前修改它。拦截器本质上等同于 Express或 Mongoose 的中间件。

我以前做过一个项目，要求在每个请求中附加一个包含用户访问令牌的授权头。这是一个金融应用，系统需要为每个请求验证用户身份。在这个例子中，最好是将授权头自动附加到每个请求中，而不是单独设置它们。

认证是拦截器最常见的应用之一。客户端应用经常通过在授权头中提交一个秘密访问令牌来向服务器验证用户身份。

我们可以使用Axios拦截器为所有的请求自动设置 Authorization header。

// Request interceptors for API calls
axios.interceptors.request.use(
  config => {
    config.headers['Authorization'] = `Bearer ${localStorage.getItem('access_token')`};
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

在这个例子中，我们使用 axios.interceptors.request.use 方法来更新每个请求头并在Authorization HTTP头中设置访问令牌。

我们以 config.headers 对象中的 Authorization 头为目标，并将存储在 localStorage 中的Bearer 令牌设为其值。

Axios拦截器对于监控访问令牌是否即将过期也很有用。一个 refreshToken() 函数可以用来在令牌过期前更新它。

const refreshToken= ()=>{
  // gets new access token
}
 

我们也可以调用 axios.interceptors.response.use() 方法来获取新的访问令牌，只要响应返回403 错误，这意味着现有令牌已经过期。

// Response interceptor for API calls
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if(error.response.status == 403){
            refreshToken()
        }
    }
);
 

在这个例子中，axios.interceptors.response.use 方法拦截所有传入的响应，然后检查response 的状态。如果触发 response 的请求没有经过验证，那么令牌就过期了。在这种情况下，我们调用refreshToken() 函数来获得一个新的访问令牌。

总结

在这篇文章中，我们研究了如何通过传递一个对象、创建一个特定的Axios实例以及使用Axios拦截器来用Axios设置HTTP请求标头。关于Axios HTTP客户端的其他功能，官网