异步与Promise

发表于 更新于 分类于 本文字数： 4.5k 阅读时长 ≈ 4 分钟

JS异步的概念

我们的JS程序几乎是由多个块(函数)构成的，这些块中只有一个是现在执行，其余的则会在将来执行

1
2
3
4
5
// A
ajax("..",function(..) {
	//C
})
// B

// A 和 // B 表示程序的前半部分(也就是现在的部分)，而// C 标识了程序的后半部分(也就是将来的部分)。前半部分立刻执行，然后是一段时间不确定的停顿。在未来的某个时刻，如果Ajax调用完成，程序就会从停下的位置继续执行后半部分，这个ajax函数就是异步函数。

事件循环

举例来说，如果你的JavaScript程序发出一个Ajax请求，从服务器获取一些数据，那你就在一个函数(通常称为回调函数)中设置好响应代码，然后JavaScript引擎会通知宿主环境(对多数开发者来说通常就是Web浏览器)：“嘿，现在我要暂停执行，你一旦完成网络请求，拿到了数据，就请调用这个函数”。然后浏览器就会设置侦听来自网络的响应，拿到要给你的数据之后，就会把回调函数插入到事件循环，以此实现对这个回调的调度执行
那么，什么是事件循环？
先通过一段伪代码了解一下这个概念：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// eventLoop是一个用作队列的数组
// (先进，先出)
let eventLoop = [];
let event;

// “永远”执行
while(true) {
    // 一次tick
    if(eventLoop.length > 0) {
        // 拿到队列中的下一个事件
        event = eventLoop.shift();
        // 现在，执行下一个事件
        try {
            event();
        }
        catch (err) {
            reportError(err);
        }
    }
}

一定要清楚，setTimeout(..)并没有把你的回调函数挂在事件循环队列中。它所做的是设定一个定时器。当定时器到时后，环境(对多数开发者来说通常就是Web浏览器)会把你的回调函数放在事件循环中，这样，在未来某个时刻的tick会摘下并执行这个回调。

回调地狱

现在来看一段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function drive(fn, timer) {
    setTimeout(fn, timer);
}
function play(fn, timer) {
    setTimeout(fn, timer);
}
function dinner(fn, timer) {
    setTimeout(fn, timer);
}
(function () {
    drive(() => {
        console.log("正在开车去商场");	// A
    }, 3000);
    play(() => {
        console.log("正在商场玩");		// B
    }, 2000);
    dinner(() => {
        console.log("正在商场吃晚餐");	// C
    }, 1000);
})();

// 我们希望代码依次按照A,B,C的顺序执行
// 实际上输出顺序C,B,A

上述代码输出结果与预期不符是因为setTimeout是异步函数，根据事件循环队列先进先出的原则，它会依次执行C,B,A函数的回调函数

使用回调函数调整异步函数执行顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function drive(fn, timer) {
    setTimeout(fn, timer);
}
function play(fn, timer) {
    setTimeout(fn, timer);
}
function dinner(fn, timer) {
    setTimeout(fn, timer);
}

(function () {
    drive(() => {
        console.log("正在开车去商场");	// A
        play(() => {
            console.log("正在商场玩");	// B
            dinner(() => {
                console.log("正在商场吃晚餐");	// C
            }, 1000);
        }, 2000);
    }, 3000);
})();
// 此时输出顺序为A,B,C

这里我们得到了三个函数嵌套在一起构成的链，其中每个函数代表异步序列(任务，”进程”)中的一个步骤
这种代码常常被称为回调地狱(callback hell)，有时也被称为毁灭金字塔(pyramid of doom，得名于嵌套缩进产生的横向三角形状)
很显然，这种代码是复杂和难以阅读维护的，于是Promise出现了

Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说，Promise是一个对象(广义)，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理
Promiese对象有以下两个特点
(1)对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
(2)一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
ES6规定，Promise对象是一个构造函数，用来生成Promise实例
现在来看一段Promise代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
console.log("我是同步代码A");
const drive = new Promise((resolve, reject) => {
    console.log("我是drive Promise里的代码");
    setTimeout(() => {
        resolve("正在开车去商场");
    }, 3000);
});
const play = new Promise((resolve, reject) => {
    console.log("我是play Promise里的代码");
    setTimeout(() => {
        resolve("正在商场玩");
    }, 2000);
});
const dinner = new Promise((resolve, reject) => {
    console.log("我是dinner Promise里的代码");
    setTimeout(() => {
        resolve("正在商场吃晚餐");
    }, 1000);
});
drive
    .then((data) => {
    console.log(data);
    return play;
})
    .then((data) => {
    console.log(data);
    return dinner;
})
    .then((data) => {
    console.log(data);
});
console.log("我是同步代码B");
// 输出结果:
// 我是同步代码A
// 我是drive Promise里的代码
// 我是play Promise里的代码
// 我是dinner Promise里的代码
// 我是同步代码B
// 正在开车去商场
// 正在商场玩
// 正在商场吃晚餐

上面代码中，Promise新建后立即执行，所以首先输出的是 Promise里的代码。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以 正在开车去商场…最后输出

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve（异步操作成功时调用）和reject(异步操作失败时调用)。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
了解：
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

async await

ES2017标准引入了async函数，使得异步操作变得更加方便。
async函数是什么？一句话，它就是Generator函数的语法糖
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function drive() {
    setTimeout(() => {
        console.log("正在开车去商场");
    }, 3000);
}
function play() {
    setTimeout(() => {
        console.log("正在商场玩");
    }, 2000);
}
function dinner() {
    setTimeout(() => {
        console.log("正在商场吃晚餐");
    }, 1000);
}
(async function () {
    await drive();
    await play();
    await dinner();
})();