什么是 Ajax？
Ajax（Asynchronous JavaScript and XML）是一种无需重新加载整个页面的技术，可以实现局部数据的更新和页面的异步交互。
在前端开发中，我们经常需要使用 Ajax 技术来获取后端数据或与后端进行交互。
为什么使用 axios？
在 Vue.js 中使用 Ajax 请求时，我们可以选择使用原生的 XMLHttpRequest 对象或各种第三方 Ajax 库，例如 jQuery 的 $.ajax() 方法。
然而，axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 中。它具有以下优点：
- 可以拦截请求和响应，方便处理错误、设置请求头等功能；
- 支持数据的自动转换和 CSRF 防护；
- 支持取消请求，避免不必要的网络请求；
- 具有良好的文档和广泛的社区支持。
因此，使用 axios 是非常适合在 Vue.js 中进行 Ajax 请求的选择。
如何在 Vue.js 中使用 axios？
在 Vue.js 中使用 axios 有两种方式：
- Vue.prototype.$axios = axios
- 在组件中引入并使用
全局设置
全局设置的方式是在 Vue.prototype 上挂载 axios 实例。这样，我们可以在任何组件中使用 this.$axios 访问和调用 axios。
import axios from 'axios' Vue.prototype.$axios = axios
此时，我们可以通过以下代码在组件中使用 axios 发送请求：
-- -------------------- ---- -------
------ ------- -
-------- -
------------- -
----------------------------
-------------- -- -
--------------------------
--
------------ -- -
------------------
--
-
-
-在组件中使用
在组件中使用 axios 也非常简单，只需要在组件中引入 axios 并使用即可。
-- -------------------- ---- -------
------ ----- ---- -------
------ ------- -
-------- -
------------- -
----------------------
-------------- -- -
--------------------------
--
------------ -- -
------------------
--
-
-
-需要注意的是，在组件中使用 axios 时，我们可以添加拦截器（interceptor）以及其他的配置选项，例如 baseURL、timeout 等。
添加拦截器
拦截器是在发送请求或响应到达之前（或之后）执行的函数，可以用来打印请求日志、设置请求头、处理错误等。
以下是一个使用 axios 添加拦截器的示例：
-- -------------------- ---- -------
------ ----- ---- -------
-- -------
-------------------------------
------ -- -
------------------ -----------
------ ------
--
----- -- -
------------------
------ ---------------------
-
-
-- -------
--------------------------------
-------- -- -
------------------ --------------
------ --------
--
----- -- -
------------------
------ ---------------------
-
-
------ ------- -
-------- -
------------- -
----------------------
-------------- -- -
--------------------------
--
------------ -- -
------------------
--
-
-
-拦截器可以用于很多场景，例如在请求头中添加认证信息、显示加载动画、捕捉错误信息等。
axios 的配置选项
除了上面介绍的拦截器，axios 还有许多其他的配置选项，可以用于更加精细化的控制请求和响应的过程。
以下是一些常用的配置选项：
- baseURL：设置请求的基准 URL
- headers：设置请求头
- params：设置 URL 参数
- data：设置 POST 请求的数据
- withCredentials：设置是否允许携带 Cookie
- timeout：设置请求超时时间
- responseType：设置响应的数据类型
- transformRequest：设置请求数据转换函数
- transformResponse：设置响应数据转换函数
我们可以根据实际需求进行选用和组合使用。
总结
在 Vue.js 中使用 axios 发送 Ajax 请求非常方便，可以使用全局设置或在组件中引入使用。axios 还支持拦截器和灵活配置选项，使我们可以实现更加精细化的控制请求和响应过程。在使用 axios 时，我们应该注意请求超时、错误处理和安全等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c0c0748841e9894a58485
