JavaScript中的异步编程
一、回调函数
因为在JS中函数是一等公民，所以它可以像其他变量一样作为参数进行传递。例如下方这段登录时的业务逻辑代码：
let key, token, userId;
$.ajax({
type: 'get',
url: 'http://localhost:3000/apiKey',
success: function (data) {
key = data;
$.ajax({
type: 'get',
url: 'http://localhost:3000/getToken',
data: {
key: key
},
success: function (data) {
token = data.token;
userId = data.userId;
$.ajax({
type: 'get',
url: 'http://localhost:3000/getData',
data: {
token: token,
userId: userId
},
success: function (data) {
console.log('业务数据：', data);
},
error: function (err) {
console.log(err);
}
});
},
error: function (err) {
console.log(err);
}
});
},
error: function (err) {
console.log(err);
}
});
整段代码充满了回调嵌套，代码不仅在纵向扩展，横向也在扩展，这就是我们常说的回调地狱（Callback Hell）
二、Promise
ES6的Promise也好，jQuery的Promise也好，不同的库有不同的实现，但是大家遵循的都是同一套规范，所以，Promise并不指特定的某个实现，它是一种规范，是一套处理JavaScript异步的机制。
用Promise的方式重构上面那段代码：
let getKeyPromise = function () {
return new Promise((resolve, reject) => {
$.ajax({
type: 'get',
url: 'http://localhost:3000/apiKey',
success: function (data) {
let key = data;
resolve(key);
},
error: function (err) {
console.log(err);
}
});
});
}
let getTokenPromise = function (key) {
return new Promise((resolve, reject) => {
$.ajax({
type: 'get',
url: 'http://localhost:3000/getToken',
data: {
key: key
},
success: function (data) {
resolve(data);
},
error: function (err) {
console.log(err);
}
});
});
}
let getDataPromise = function(data) {
let token = data.token;
let userId = data.userId;
return new Promise((resolve, reject) => {
$.ajax({
type: 'get',
url: 'http://localhost:3000/getData',
data: {
token: token,
userId: userId
},
success: function (data) {
resolve(data);
},
error: function (err) {
console.log(err);
}
});
});
}
getKeyPromise()
.then(key => {
return getTokenPromise(key);
})
.then(data => {
return getDataPromise(data);
})
.then(data => {
console.log("业务数据" + data);
})
.catch(err => {
console,log(err);
});
Promise去除了横向扩展，无论有再多的业务依赖，通过多个then(…)来获取数据，再一点就是逻辑性更明显，层级比较清晰，Promise在一定程度上解决了回调函数的书写结构问题，但回调函数依然在主流程上存在，只不过都放到了then(…)里面。
首先明确一点，Promise可以保证以下情况，引用自JavaScript | MDN：
在JavaScript事件队列的当前运行完成之前，回调函数永远不会被调用
通过 .then 形式添加的回调函数，甚至都在异步操作完成之后才被添加的函数，都会被调用
通过多次调用 .then，可以添加多个回调函数，它们会按照插入顺序并且独立运行
三、生成器函数Generator
一种顺序、看似同步的异步流程控制表达风格，这就是ES6中的生成器（Gererator）。
Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
yield表达式
由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
遍历器对象的next方法的运行逻辑如下。
（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。
需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。
可迭代协议和迭代器协议
了解Generator之前，必须先了解ES6新增的两个协议：可迭代协议和迭代器协议。
可迭代协议
可迭代协议运行JavaScript对象去定义或定制它们的迭代行为，例如（定义）在一个for…of结构中什么值可以被循环（得到）。以下内置类型都是内置的可迭代对象并且有默认的迭代行为：
Array
Map
Set
String
TypedArray
函数的Arguments对象
NodeList对象
注意，Object不符合可迭代协议。
为了变成可迭代对象，一个对象必须实现@@iterator方法，意思是这个对象（或者它原型链prototype chain上的某个对象）必须有一个名字是Symbol.iterator的属性：
| 属性 | 值 |
|---|---|
| [Symbol.iterator] | 返回一个对象的无参函数，被返回对象符合迭代器协议 |
迭代器协议
ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值，所以要放在方括号内。该对象的根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。
| 属性 | 值 |
|---|---|
| next | 返回一个对象的无参函数，被返回对象拥有两个属性 |
其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束，遍历结束时value为undefined，done为true。
再次重构上面打代码：
function getKey () {
$.ajax({
type: 'get',
url: 'http://localhost:3000/apiKey',
success: function (data) {
key = data;
it.next(key);
}
error: function (err) {
console.log(err);
}
});
}
function getToken (key) {
$.ajax({
type: 'get',
url: 'http://localhost:3000/getToken',
data: {
key: key
},
success: function (data) {
loginData = data;
it.next(loginData);
}
error: function (err) {
console.log(err);
}
});
}
function getData (loginData) {
$.ajax({
type: 'get',
url: 'http://localhost:3000/getData',
data: {
token: loginData.token,
userId: loginData.userId
},
success: function (busiData) {
it.next(busiData);
}
error: function (err) {
console.log(err);
}
});
}
function *main () {
let key = yield getKey();
let LoginData = yield getToken(key);
let busiData = yield getData(loginData);
console.log('业务数据：', busiData);
}
// 生成迭代器实例
var it = main();
// 运行第一步
it.next();
console.log('不影响主线程执行');
四、Async/Await
上面我们介绍了Promise和Generator，把这两者结合起来，就是Async/Await。
Generator的缺点是还需要我们手动控制next()执行，使用Async/Await的时候，只要await后面跟着一个Promise，它会自动等到Promise决议以后的返回值，resolve(…)或者reject(…)都可以
用Async/Await的方式改写上面的代码：
let getKeyPromise = function () {
return new Promsie(function (resolve, reject) {
$.ajax({
type: 'get',
url: 'http://localhost:3000/apiKey',
success: function (data) {
let key = data;
resolve(key);
},
error: function (err) {
reject(err);
}
});
});
};
let getTokenPromise = function (key) {
return new Promsie(function (resolve, reject) {
$.ajax({
type: 'get',
url: 'http://localhost:3000/getToken',
data: {
key: key
},
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
};
let getDataPromise = function (data) {
let token = data.token;
let userId = data.userId;
return new Promsie(function (resolve, reject) {
$.ajax({
type: 'get',
url: 'http://localhost:3000/getData',
data: {
token: token,
userId: userId
},
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
};
async function main () {
let key = await getKeyPromise();
let loginData = await getTokenPromise(key);
let busiData = await getDataPromise(loginData);
console.log('业务数据：', busiData);
}
main();
console.log('不影响主线程执行');
Async/Await是Generator和Promise的组合，完全解决了基于回调的异步流程存在的两个问题，可能是现在最好的JavaScript处理异步的方式了。
总结
JavaScript异步编程的发展历程阶段：
1. 第一个阶段
回调函数，但会导致两个问题:
- 缺乏顺序性：回调地狱导致的调试困难，和大脑的思维方式不符
- 缺乏可信任性：控制反转导致的一系列信任问题
2. 第二个阶段
Promise，Promise是基于PromiseA+规范的实现，它很好的解决了控制反转导致的信任问题，将代码执行的主动权重新拿了回来。
3. 第三个阶段
生成器函数Generator，使用Generator，可以让我们用同步的方式来书写代码，解决了顺序性的问题，但是需要手动去控制next(…)，将回调成功返回的数据送回JavaScript主流程中。
4. 第四个阶段
Async/Await，Async/Await结合了Promise和Generator，在await后面跟一个Promise，它会自动等待Promise的决议值，解决了Generator需要手动控制next(…)执行的问题，真正实现了用同步的方式书写异步代码。
