18vue学习——Vue 中的 Ajax（axios)

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 这些属性都不必在配置中指定。