Vue.js 是一套构建用户界面的渐进式框架，它采用数据驱动和组件化的思想，使得前端开发更加便捷、高效。
在 Vue.js 中，异步请求是前端开发中的常见操作，通过异步请求可以获取到后端服务器的数据并更新页面，实现数据的实时加载和更新。而 Axios 则是基于 Promise 的 HTTP 请求客户端，它可以在浏览器和 Node.js 中使用，能够处理跨域请求和请求的取消。
本篇文章将详细介绍 Vue.js 中异步请求和 Axios 的使用方法及注意事项，并提供示例代码，帮助读者深入了解和掌握这些技能。
一、Vue.js 中异步请求的使用方法
1.使用 Vue.js 内置的 $http 模块
Vue.js 内置了一个 $http 模块，可以用来发送异步请求。$http 模块底层使用了浏览器内置的 XMLHttpRequest 对象，支持 Promise，使用方法如下：
this.$http.get(url, [options]).then(response => {
// 处理响应结果
}, error => {
// 处理错误信息
});其中，url 是要请求的地址，[options] 是可选的配置项，支持的配置项如下：
- params：参数，可以是 URLSearchParams 对象、plain object 或者 URL 查询字符串格式的字符串
- headers：请求头，是一个对象，每个属性代表一个请求头字段
- progress：用于上传下载进度监控的回调函数
- timeout：请求超时时间，单位为毫秒
- responseType：响应的数据类型，可以是 text、arraybuffer、blob、document、json 等
- withCredentials：是否发送跨域请求时携带凭证，比如 Cookie、认证头等
- cache：是否启用缓存，只在 GET 请求中有效，IE9/10 中不支持该选项
2.使用第三方库如 Axios、jQuery
除了使用 Vue.js 内置的 $http 模块，还可以使用第三方库如 Axios、jQuery 发送异步请求。其中，Axios 是比较推荐使用的库。
Axios 的使用方法如下：
-- -------------------- ---- -------
-------------- ----------------------- -- -
-- ------
-------------- -- -
-- ----------------------- -
--------------------
- ---- -
---------------------
-
---其中，url 是要请求的地址，[config] 是可选的配置项，支持的配置项如下：
- method：请求方法，默认为 GET，可以是 GET、POST、PUT、DELETE 等
- params：参数，可以是 URLSearchParams 对象、plain object 或者 URL 查询字符串格式的字符串
- data：请求体数据，是一个包含请求体数据的对象，只适用于请求方法为 POST、PUT、PATCH、DELETE、OPTIONS 的时候
- headers：请求头，是一个对象，每个属性代表一个请求头字段
- auth：认证信息，是一个包含 username 和 password 的对象，会被设置为 Authorization 头
- timeout：请求超时时间，单位为毫秒
- responseType：响应的数据类型，可以是 text、arraybuffer、blob、document、json 等
- withCredentials：是否发送跨域请求时携带凭证，比如 Cookie、认证头等
- transformRequest 和 transformResponse：请求和响应数据的转换函数，可以用来处理数据格式
- xsrfCookieName 和 xsrfHeaderName：防止 CSRF 攻击，设置 cookie 的名字和 header 的名字
二、Axios 在 Vue.js 中的使用方法及注意事项
由于 Axios 可以在浏览器和 Node.js 中使用，如果要在 Vue.js 中使用，需要在 main.js 中引入 Axios 并设置为全局变量：
import axios from 'axios'; Vue.prototype.$http = axios;
然后就可以在 Vue 组件中使用 this.$http 或者 axios 来发送异步请求了。
1.中断请求
在 Vue.js 中，异步请求有可能会被取消或者中断（如跳转页面后）。为了避免这种情况导致的错误，可以在组件的 beforeDestroy 钩子中调用 cancel 方法中断请求。
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------------ ---------------------------
--
--
-------- -
----------- -
------------------- - ------------ ---------------------- --
-------------- -- -
-- ------
--
------------ --
-- ----------------------- -
--------------------
- ---- -
---------------------
-
--
--
--
--------------- -
--------------------------
--
--示例代码中，定义了一个 cancelToken 对象，用来创建一个 CancelToken 实例。将 CancelToken 实例的 token 属性作为 axios 的配置项，传递给 get 方法。在 beforeDestroy 钩子中调用 cancel 方法中断请求，如果请求已经发送，then 或 catch 中的回调函数不会被调用，而是会直接跳到 catch 块中。
2.全局拦截器
Axios 支持全局拦截器，可以用来拦截请求或响应，统一处理请求或响应的数据。在 main.js 中设置拦截器：
-- -------------------- ---- ------- ------ ----- ---- -------- -- ----- ------------------------------------- -- - -- ------ ------ ------- -- ----- -- - -- ------ ------ ---------------------- --- -- ----- ---------------------------------------- -- - -- ------ ------ --------- -- ----- -- - -- ------ ------ ---------------------- --- ------------------- - ------
示例代码中，使用 axios.interceptors.request.use 设置请求拦截器，使用 axios.interceptors.response.use 设置响应拦截器。两个拦截器都分别传入一个回调函数，第一个参数是请求配置或响应，第二个参数是错误信息。如果回调函数返回的是 Promise.resolve，则会继续执行后面的操作；如果回调函数返回的是 Promise.reject，则会跳到 catch 块中。
3.跨域请求
在 Vue.js 中发送跨域请求可以采用 JSONP、CORS、第三方代理等方式，而 Axios 则只需要设置 withCredentials 为 true，就可以启用跨域请求。但是，要想正确使用 withCredentials，服务器也必须正确配置 Access-Control-Allow-Credentials 和 Access-Control-Allow-Origin 头。
下面是一个启用跨域请求的示例：
this.$http.get(url, { withCredentials: true })
.then(response => {
// 处理响应结果
})
.catch(error => {
// 处理异常信息
});三、总结
本文详细介绍了 Vue.js 中异步请求和 Axios 的使用方法及注意事项，并提供了示例代码。通过本文的学习，读者可以深入了解 Vue.js 中的异步请求和 Axios 的使用技巧，也可以掌握如何在 Vue.js 中正确使用异步请求。同时，本文也讲解了一些常见的问题和注意事项，希望能够帮助读者顺利地开发和维护 Vue.js 项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64747467968c7c53b01d48f8