ES6: Promise的AJAX应用(同步、异步理解)

JS是单线程的语言，它所处理任务只能一个一个排着队来，而使用AJAX时，如果也要排队做任务，那么处理信息时，之前一个请求没有完成，后面的只能排着队等待，属实影响用户体验，因此设计AJAX时就想到这个问题，所以AJAX并不由JS控制而由浏览器控制，它是 异步请求 ，它不会等上一个任务完成再执行下一个任务

同步与异步请求

同步： 就比如说，你去奶茶店买奶茶，只有一个工作人员，那你就要排队来买，前一个要椰果奶茶，那就等工作人员做好椰果奶茶，再轮到下一位顾客点单、制作奶茶，这就是同步
异步： 但是如果这个奶茶店有好几个工作人员，一个来负责点单，剩下负责制作奶茶，这样就只是排队来下单，这就相当于AJAX发送的请求
然后制作奶茶的工作人员就开始制作，因为有的奶茶做起来工序比较复杂，所以不一定会按照下单的顺序来完成，这就相当于AJAX请求的数据有的大有的小，加载的速度也不同，就会导致你可能是先下的单，但是最后才拿到你的奶茶

AJAX异步请求的问题

为方便理解，域名由省略号代替

这个样子AJAX异步请求的问题就很突出了，比如你要获取一个班级的第一个同学的个人信息，如果这么操作：

//以下是JQuery的AJAX语法，简单的省略
let student;

$.get('https://....../grade1', data => {
	//获取student的姓名
	student = data[0].name;
	console.log(student);
});
//下面请求这名学生的个人信息
$.get(`https://....../grade1/${student}`, data => {
	//获取student的信息
	console.log(data);
});

这种时候就有可能有一个问题，第二个请求可能会先于第一个请求完成，就会导致student的值是undefined，第二个请求就不会输出想要的结果，这就是异步请求导致的
一般的解决办法就是将第二个请求放入第一个请求的回调函数中：

//以下是JQuery的AJAX语法，简单的省略
let student;

$.get('https://....../grade1', data => {
	//获取student的姓名
	student = data[0].name;
	console.log(student);

	//下面请求这名学生的个人信息
	$.get(`https://....../grade1/${student}`, data => {
		//打印student的信息
		console.log(data);
	});
});

这样做也会有一个问题，就是如果你需要很多个这样依次的请求，就会嵌套很多层，可读性会很受影响，维护起来也很头疼

Promise

以 axios 包为例，它支持Promise API，通过then()方法来实现，上面的代码就可以这么改写：

//引入axios包

let student;
//获取班级信息的请求
const studentPromise = axios.get('https://....../grade1');

//请求成功后执行的回调函数
studentPromise
	.then(response => {
		//将第一个学生的姓名获取到student
		student = response.data[0].name;
		//返回一个深一层的请求，获取该同学的信息
		return axios.get(`https://....../grade1/${student}`);
	})
	.then(response => {
		//打印该学生信息
		console.log(response.data);
	})

这样写就看起来非常的整齐，可读性非常高