任务61：AJAX中的串行和并行（回调地狱）

任务61：AJAX中的串行和并行（回调地狱）

1.Promise简介

Promise是ES6中新增的一个内置类:它是一种“承诺“设计模式，主要是有效规划异步编程的代码，
尤其是再处理AJAX异步请求的“回调地狱”上有很大的帮助。

2.AJAX的串行和并行

真实项目中的AJAX请求一定都是异步请求的（每发送AJAX相当于发送一个HTTP请求任务

AJAX的串行:下一个请求依赖上一个请求的信息，或者上一个请求成功，下一个请求才能发送。

AJAX的并行:利用HTTP的并发性，同时发送多个异步请求，当所有请求都成功后，去做什么事情。

(1)串行

举个例子，假如有4个接口/api/1,/api/2,/api/3,/api/4,我想做串行，发送完第一个请求再发送第二个，第二个请求发送完再发送第三个，第三个请求发送完，再发送第四个。在不使用promise的情况，用传统的ajax请求，比如使用JQuery中的ajax请求，如下这样容易形成回调地狱。

 $.ajax({
	url: '/api/1',
	// 请求成功会触发success回调函数执行
	// result从服务器获取的结果
	success: function (result) {

		// 发送下一个请求
		$.ajax({
			url: '/api/2',
			success: result => {

				// 发送下一个请求
				$.ajax({
					url: '/api/3',
					success: result => {

						// 发送下一个请求
						$.ajax({
							url: '/api/4',
			   			 success: result => {

							}
						});
					}
				});
			}
		});
	}
}); 

promise写法

把三个单独封装成方法，每个方法都是基于promise管控的。然后用then链进行回调地狱扁平化，实现串行。

function fn1() {
	return new Promise(resolve => {
		$.ajax({
			url: '/api/1',
			success: result => {
				resolve(result);
			}
		});
	});
}

function fn2() {
	return new Promise(resolve => {
		$.ajax({
			url: '/api/2',
			success: result => {
				resolve(result);
			}
		});
	});
}

function fn3() {
	return new Promise(resolve => {
		$.ajax({
			url: '/api/3',
			success: result => {
				resolve(result);
			}
		});
	});
} 
/*回调地狱扁平化*/
fn1().then(result => {
	// 第一个请求成功
	return fn2();
}).then(result => {
	// 第二个请求成功
	return fn3();
}).then(result => {
	// 第四个请求成功
}); 

async,await实现

Promise语法糖，明明是异步的，只是看起来和同步差不多。比起原始的"回调地狱"方便和简洁很多，捕获异常用try…catch.

(async function () {
	let result1 = await fn1();
	let result2 = await fn2(result1.name);//把上一个请求结果或者里面的参数传进来
	let result3 = await fn3();
})();

(2)并行

如果自己使用ajax并行,则代码如下:

let n = 0,
	results = [];

function func(results) {
	console.log('OK');
}

function fire(result, index) {
	results[index] = result;
	if (n >= 3) {
		func(results);
	}
}
$.ajax({
	url: '/api/1',
	success: result => {
		n++;
		fire(result, 0);
	}
});

$.ajax({
	url: '/api/2',
	success: result => {
		n++;
		fire(result, 1);
	}
});

$.ajax({
	url: '/api/3',
	success: result => {
		n++;
		fire(result, 2);
	}
}); 

Promise.all

Promise.all([fn1(), fn2(), fn3()]).then(results => {
	// 三个请求都成功才会执行
	// results:按照顺序存储的每一项的返回结果
});