大家在js编程中肯定遇到过异步问题，实践中大家在异步问题上也不断提出新的解决方案，这里就梳理一下异步解决方案。
回调函数
回调函数是最原始的解决方案，逻辑上很容易理解。看个例子：
function f1(value, callback) {
console.log('f1');
setTimeout(
() => {
value = setValue('f2');
callback.call(this, value);
}
, 1000
);
}
function f2(value){
console.log(value);
}
function setValue(value) {
return value;
}
let value;
f1(value, f2);
结果.png
这里的
f2需要f1延时1s完成value的重新赋值后再打印value，比较简单的处理就是把f2作为f1的回调函数。
这是历史最悠久的方案
- 优点：兼容性好
- 缺点：当回调函数不断嵌套时，代码会横向发展，形成“意大利面”（Italian noodles）代码
Promise对象
随着历史的发展，在前端社区的某些库中有人提出了Promise方案，后来这个方案也被写入官方标准。本文不再谈各种前端库中Promise的实现，只谈目前ES规范中的Promise。
几个要点：
-
Promise是一个原生对象，我们使用Promise对象是利用它的API。 -
Promise对象的异步操作有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。回调函数只在fulfilled（已成功）和rejected（已失败）状态下触发。 -
Promise对象的实例可以调用then方法指定不同状态的回调函数（或catch方法注册rejected（已失败）状态的回调函数）
使用Promise对象重新实现上文的例子：
let value;
function f1() {
console.log('f1');
const promise = new Promise((resolve, reject) => {
setTimeout(
() => {
let value = setValue('f2');
if (!!value) {
resolve(value);
} else {
reject('error');
}
}
, 1000);
});
return promise;
}
function f2(value){
console.log(value);
}
function setValue(value) {
return value;
}
f1()
.then(
f2,
(error) => console.log(error)
);
结果.png
可以看到函数
f1返回了一个Promise对象的实例，这个实例就具有.then/.catch等方法注册回调函数。再看一个使用
Promise实现的AJAX封装
function fetchRemote(url, method='GET', param=null) {
const promise = new Promise(function(resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4){
return;
}
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.response);
} else {
reject(xhr.status);
}
};
xhr.send(param);
});
return promise;
}
// 调用
fetchRemote(url)
.then(
(response) => {
todo...
}
)
.catch(
(error) => {
todo...
}
)
这里提一个小细节： 请注意XMLHttpRequest对象的实例具有实例方法onreadystatechange()，实际上这是一个注册回调函数的api，每一次XMLHttpRequest实例对象的readyState/status被改变时，回调函数都会被异步触发
此外，Promise对象也提供了一些新API适应不同场景，例如.race/.all。
// Promise.race() 适用于等待多个promise第一个完成的场景
Promise.race(task1, task2, task3...).then().catch();
// Promise.all() 适用于等待多个promise同时完成的场景
Promise.all(task1, task2, task3...).then().catch();
Generator函数
学习过Generator函数的同学应该知道，Generator函数最大的特点就是不会顺序执行到底，遇到yield语句时会暂停，直到调用next方法才会继续执行。显然，这种特性很适合异步场景。
还是实现最初的小例子：
const setValue = value => value;
let value;
function* f1() {
console.log('f1');
yield new Promise((resolve, reject) => {
setTimeout(() => {
value = setValue('f2');
if (!!value) {
resolve(value);
} else {
reject('error');
}
}, 1000);
});
}
function f2 (value) {
console.log(value);
}
let g = f1();
g.next().value
.then(f2)
.catch((error) => {console.error(error);});
结果.png
再看一个远程请求的例子：
function* fetchData(url) {
const data = yield fetch(url);
yield handler(data);
}
const g = fetchData('http://url/api');
g.next();
g.next();
可以看到，通过使用Generator函数的属性，异步逻辑变得非常简单，只需要在异步等待的函数处“暂停”即可。这种语法在redux-saga的库中有很好的应用。
async函数
async函数顾名思义，就是为解决异步场景而生的。
async函数返回的是一个Promise对象，所以async函数返回的结果可以调用.then()/.catch()方法，本质上和promise对象用法类似，只是有了语法糖书写更简便。
还是这个熟悉的老例子：
const setValue = value => value;
let value;
function f1() {
console.log('f1');
return new Promise((resolve, reject) => {
setTimeout(() => {
value = setValue(null);
if (!!value) {
resolve(value);
} else {
reject('error');
}
}, 1000);
});
}
function f2 (value) {
console.log(value);
}
async function fn() {
return await f1();
}
fn()
.then(
(value) => {console.log(value);}
)
.catch(
(error) => console.error(error)
);
结果.png
简单解释一下，
async和await需要互相配合，await只能在async函数中使用，await等的是promise对象，如果await得到的不是promise对象则会把普通对象直接作为promise的value并更新状态为resolved。可以很明显看出，一般情况下
async函数不具有优势，它的优势在处理then链。看个例子：
async function manycbs() {
const arg1 = 'xxx';
const arg2 = await step1(arg1);
const arg3 = await step2(arg1, arg2);
const result = await step3(arg1, arg2, arg3);
console.log(result);
}
manycbs();
这样就可以看出async函数可以把异步写得像同步一样。
