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