随着前端技术的飞速发展，单页面应用（SPA）已经成为了一种主流形式。SPAs 具有许多优点，例如快速响应时，保持页面状态，减少服务器压力等。为了与服务器交互数据，我们需要使用一些库和框架来进行网络请求。在本文中，我们将使用一个流行的 JavaScript 库 Axios，它可以帮助我们轻松地实现向服务器发送请求和响应拦截。
Axios 简介
Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它是一个用于从服务器检索数据并将数据发送到服务器的库。Axios 相比其他请求库有几个优点：
- 从浏览器中创建 XMLHttpRequests。
- 支持 Promise API。
- 自动转换 JSON 数据。
- 可以在请求/响应拦截器上全局注册。
- 可以取消请求。
- 自动处理请求错误。
Axios 的安装和基本用法
在开始使用 Axios 之前，我们需要先安装它。可以使用 npm 包管理器来安装它：
npm install axios
要使用 Axios，我们需要在项目中引入它：
import axios from 'axios';
现在我们可以使用 Axios 发送 HTTP 请求：
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});上面的代码向服务器发送了一个 GET 请求，并在控制台中输出了响应数据。Axios 还支持其他 HTTP 方法，例如 POST、PUT 等。我们可以通过传递一个配置对象来发送请求：
axios({
method: 'post',
url: '/user',
data: {
firstName: 'John',
lastName: 'Doe'
}
});在这个例子中，我们发送了一个 POST 请求，向服务器发送了一个带有名字的用户数据。
Axios 的请求拦截
在我们向服务器发送请求之前，有时我们需要在请求头中添加一些通用信息、token 或者在发送之前判断用户是否登录等。Axios 提供了拦截请求和响应的机制，我们可以使用它来实现这些功能。
请求拦截器函数是在发送请求之前执行的函数，可以为请求添加一些信息。Axios 可以全局注册拦截器，以便于拦截所有请求。示例如下：
axios.interceptors.request.use(function (config) {
// 在请求之前做些什么
config.headers.Authorization = localStorage.getItem('token');
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});在本例中，我们在请求头中添加了一个名为 “Authorization” 的 token。这里我们使用了一个拦截器函数，它返回更改后的配置。 Axios 还支持多个拦截器，以便于编写更优秀的应用程序。
Axios 的响应拦截
在向服务器发送请求后，我们可能需要在响应中添加或删除一些信息或更改响应数据的格式。Axios 提供了响应拦截器，它们允许在接收响应时执行操作。
Axios 的响应拦截器可全局注册。
axios.interceptors.response.use(function (response) {
// 处理响应数据
return response;
}, function (error) {
// 处理响应错误
return Promise.reject(error);
});在本例中，我们简单地返回了响应对象。但我们可以使用它来修改响应数据，修改响应码，添加一些特定的头等。
总结
Axios 是一个非常流行的 HTTP 客户端库，它具有许多优点，例如支持 Promise、自动转换 JSON 数据、自动处理错误等。在本文中，我们介绍了 Axios 的基本用法、请求拦截和响应拦截的实现。拦截器功能帮助我们处理常见的网络和应用程序错误，并在请求和响应之间添加通用信息、处理 HTTP 响应等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653ab3eb7d4982a6eb4e637b