什么是 AJAX
AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它通过在不重新加载整个页面的情况下，使用 JavaScript 和 XML 实现了在后台与服务器进行数据交互的功能。这样就能够在用户不知情的情况下更新页面，提高了用户的体验。
为什么要使用 axios 发送 AJAX 请求
Vue.js 是一个基于 MVVM 架构的渐进式 JavaScript 框架，它提供了许多现代而强大的功能，如单文件组件、数据绑定、组件化等等。在 Vue.js 应用中，我们经常需要通过 AJAX 请求获取数据并更新页面，这是一个非常重要的功能。而 axios 是一个基于 Promise 的 HTTP 请求库，它可以轻松地集成到 Vue.js 应用中，提供了一种简洁且优雅的方式来发送 AJAX 请求。
如何集成 axios 到 Vue.js 应用中
首先要安装 axios，打开终端并在项目目录中输入以下命令：
npm install axios --save
在 Vue.js 应用中，可以使用 import 将 axios 引入：
import axios from 'axios'
或者通过 script 标签将其直接引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
发送 GET 请求
使用 axios 发送 GET 请求非常容易，只需要在组件中调用 axios.get(url) 即可：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------ --
-
--
--------- -
-----------------------------------------
-------------- -- -
---------- - -------------
--
------------ -- -
------------------
--
-
-在这个例子中，我们通过访问 GitHub 的 API 来获取用户列表，并将数据保存在组件的 data 属性中。如果请求成功，会在控制台中输出响应数据；否则会打印错误信息。
发送 POST 请求
使用 axios 发送 POST 请求也非常简单，只需要在组件中调用 axios.post(url, data) 即可：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
----- -
----- ---
------ ---
-------- --
-
-
--
-------- -
------------ -
--------------------------------------------- ----------
-------------- -- -
--------------------------
--
------------ -- -
------------------
--
-
-
-在这个例子中，我们使用 axios 发送了一条 POST 请求，将表单数据发送到服务器。如果请求成功，会在控制台中输出响应数据；否则会打印错误信息。
axios 请求配置
除了基本的 GET 和 POST 请求外，axios 还提供了丰富的请求配置，包括 headers、params、data、timeout、responseType、withCredentials 等等。这些配置可以在需要时被用来优化和定制请求。
axios.get('/user', {
headers: {
'Authorization': 'Bearer ' + token
},
params: {
id: 12345
}
})在这个例子中，我们在 GET 请求中添加了请求头和查询参数。
总结
使用 axios 发送 AJAX 请求是 Vue.js 应用中的重要功能之一，它可以帮助我们轻松地获取和处理数据，并且可以通过请求配置来实现定制化的操作。通过学习本文所介绍的内容，相信读者已经对 axios 的基本使用和配置有了比较深入的了解，可以在实际的开发中更加自如地使用 axios。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a89efbadd4f0e0ff1c8707