前端Vue（四）——Axios的基本使用，GET请求，POST请求，Axios并发请求、开发中this问题的记录

前端Vue（四）

Axios的基本使用

1、引言

Axios是一个异步请求技术，核心作用就是用来在页面中发送异步请求作用，并获取对应数据在页面中渲染。页面局部更新技术（Ajax）

2、下载Axios

Axios并不是Vue官方团队写的，而是第三方团队写的。所以需要下载。
中文网站：https://www.kancloud.cn/yunye/axios/234845/

安装：

使用 npm:
npm install axios

使用 bower:
bower install axios

使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>  #这种方式使用必须联网

3、GET方式请求

a、请求

Axios里面直接有个axios对象，里面有个get方法：

这样就发起了一个最简单的GET请求。

举例Json数据：

拿到响应：

b、处理数据

拿到之后怎么处理呢：
asiox给了我们一个then，then给了我们一个处理响应时的回调函数，需要我们传一个匿名函数，匿名函数中有个参数，这个就是真正的响应结果：

来看下结果：

数据都在data里面，只关心data：

这样就取到data数据结果。

c、处理异常

如果日后要处理异常，这里同样给好了方法：

d、传递参数

如果要发送数据给后端呢？

GET方式直接在网址后面加个 ？ 再拼接参数，就能传递数据。

4、POST方式请求

官网给我们的事例：

使用方法跟GET方式没什么区别。

POST方式的传递需要对象来传递！

如果要接收响应，以及异常，同样：

5、Axios的并发请求

并发请求：将多个请求在同一时刻发送到后端服务接口，最后在集中处理每个请求的响应结果

并发请求 all ：
第一个参数是一个数组，用来写并发请求的函数：

可以看到后端接收到。

那么怎么处理这两个请求的结果呢？

同样是使用then，但是会有点不同：

因为有两个函数，所以接收需要两个参数：

7、开发中的一点问题记录

a、接收后端发来的数据，此时this并不是Vue实例的this

接收了后端发来的数据，这里的this并不是指Vue的实例，而是window对象：

所以这里要获取Vue的实例，那么怎么获取呢？

把Vue实例中的this保存下来即可：
let _this = this ;

一般习惯 下划线this （_this）