18vue学习——Vue 中的 Ajax(axios)
前言
在我们之前的学习中,我们实现异步加载是使用 jQuery 来帮助我们的,但是在 vue 框架中,我们不提倡使用 jQuery ,因为 jQuery 的主要作用是操作 DOM 元素,这与 vue 的理念是相违背的。那么在 vue 中我们不使用 jQuery 中的 Ajax 的话,我们是如何实现异步加载的呢?这就需要 vue-resourse 和 axios 来帮助我们了。在前面的一篇文章中我们已经学习了 vue-resourse了,但是Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求,那这篇文章让我们来学习 axios 吧。
1. 下载和安装相关的 axios 包
Github开源地址: https://github.com/axios/axios 导入项目:和 vue-resourse 相同,我们也在 vue 的包导入之后再导入 axios 包。
2. axios 的浏览器支持情况
3. axios 的 get 方法
(1)axios.get —— 表示是使用的 get 方法
(2)get 方法中的第一个参数 url 代表的是请求的服务器地址
(3)get 方法中的第二个参数 params 的是传给服务器的参数
——(3.1)在 url 地址后面 直接传递参数
——(3.2)在 params 内部设置
(4)then 方法中的参数是一个方法,该方法是传输数据成功调用的方法
(5)catch 方法中的参数是一个方法,该方法是传输数据失败调用的方法
4. axios 的 post 方法
(1)axios.post—— 表示是使用的 post方法
(2)post 方法中的第一个参数 url 代表的是请求的服务器地址
(3)post 方法中的第二个参数 params 的是传给服务器的参数 ,post 方法只能用 params 来传递参数,不能直接在 url 后面添加参数
(4)then 方法中的参数是一个方法,该方法是传输数据成功调用的方法
(5)catch 方法中的参数是一个方法,该方法是传输数据失败调用的方法
5. 同时执行多个请求——axios.all
注意:
(1)axios.all 不能写在 vue 实例的 methods 中。
(2)如果 axios.all 的参数数组中的方法写在 vue 实例的 methods 内部的话,需要用 实例名.方法名
(3)如果是和 axios.all 一样写在 vue 实例的外部的话,便直接用 方法名 即可(如下图)
代码:
结果:
讲解:
(1)定义好 return 了 axios 请求的方法
(2)axios.all 的参数是这些方法的数组
(3)在 then() 方法中调用 axios.spread 将获取的数据按照方法在数组中顺序进行分解,可以用 .data 来获取
6. axios API——可以通过向 axios 传递相关配置来创建请求。
注意:axios 方法也不能定义在 vue 实例的内部
7. 请求方法的别名
为方便使用,官方为所有支持的请求方法提供了别名,可以直接使用别名来发起请求:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意:在使用别名方法时, url、method、data 这些属性都不必在配置中指定。