谈谈我对 Promise 和异步函数的理解

2023-02-28

data 操作 then

作为项目的技术负责人，前端本不是我的主业。目前，前端团队无论从代码质量还是技术水平，都不太令人满意。我每周合并代码时，有时会瞟一眼，有些同学的代码真的堪忧。目前，前端团队都是初级工程师，功底较差，做出来的东西只是能用而已。他们既不会总结经验，形成最佳实践;做事又随便，总是机械地应付任务。我苦口婆心地

作为项目的技术负责人，前端本不是我的主业。目前，前端团队无论从代码质量还是技术水平，都不太令人满意。我每周合并代码时，有时会瞟一眼，有些同学的代码真的堪忧。

目前，前端团队都是初级工程师，功底较差，做出来的东西只是能用而已。他们既不会总结经验，形成最佳实践;做事又随便，总是机械地应付任务。我苦口婆心地劝他们要多看看书，思考代码要怎么写更好，但收效甚微。

既然规劝没用，我就强制他们学习!我定的第一个课题是 TypeScript ，因为他们的代码质量很差，希望引入 TypeScript 后提升代码健壮性。前后端分享频率都是每周一次，但我有点忙不过来，后续改成双周一次。

组织过好几次 TypeScript 学习后，有同学提议分享自己感兴趣的研究课题，我没反对。最近李同学在研究 Promise ，因此 Promise 便成了本周的分享主题。

我是后端出身，虽然前端项目也是我在主导，但知识盲区还有很多。Promise 之前就一直没用对，真是贻笑大方。正好趁着这次机会，好好梳理下 Promise 的来龙去脉，故有此篇。

异步模型

在计算机程序中，网络和 IO 等操作通常比较耗时，为此计算机先驱们发明了两种不同的编程模型：

同步模型，操作发起后程序进入阻塞状态，等待操作完成;
异步模型，操作发起后程序先干别的事，操作完成后再通知程序处理;

Javascript 是单线程程序，为避免网络和用户操作阻塞程序，只能采用异步编程模型。异步操作发起后，Javascript 不会等待操作完成，而是接着干别的事情。

异步编程模型通常需要回调函数( callback function )来配合，操作发起前先注册一个回调函数，操作完毕后自动执行回调函数。以在浏览器中发起原生 http 请求为例：

// 操作完成后要执行的回调函数 
function onLoad(event) { 
    // 输出响应内容 
    console.log(event.target.response) 
} 
 
// 创建请求对象 
const request = new XMLHttpRequest(); 
// 将回调函数注册为事件处理器 
// 操作完毕后将自动执行 
request.addEventListener("load", onLoad); 
// 发起操作 
request.open("GET", "https://cors.fasionchan.com/about.txt"); 
request.send(); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

回调地狱

基于回调函数的编程模型并不直观：因为回调函数会层层嵌套，异步操作一多便深陷十八层地狱。

为了说明回调地狱的由来，我们凭空生造几个异步操作：

// 将数据变成大写 
function upperAsync(data, callback) { 
    setTimeout(function () { 
        callback(data.toUpperCase()); 
    }, 1000); 
} 
 
// 将数据变为反序 
function reverseAsync(data, callback) { 
    setTimeout(function () { 
        callback(data.split("").reverse().join("")); 
    }, 1000); 
} 
 
// 将数据重复几遍 
function repeatAsync(data, n, callback) { 
    setTimeout(function () { 
        callback(data.repeat(n)) 
    }, 1000); 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

这些原本都是简单的数据操作，但我们暂且将它们当成异步操作，需要一秒钟才能完成。执行这些异步操作时，除了将数据作为参数传进去，还提供一个回调函数：

const data = "abc"; 
 
upperAsync(data, function (uppered) { 
    console.log(`after upper: ${uppered}`); 
}); 
1.
2.
3.
4.
5.

数据处理完毕后，upperAsync 函数将调用回调函数，并将处理结果传回来。因此，一秒钟之后，我们将看到屏幕中输出：after upper: ABC。

这看起来还算直观，但如果将几个异步操作串起来，就另当别论了。如果我们想将数据先变成大写，再反序，最后重复两遍，回调函数得层层嵌套：

const data = "abc"; 
 
upperAsync(data, function (uppered) { 
    console.log(`after upper: ${uppered}`); 
 
    reverseAsync(uppered, function (reversed) { 
        console.log(`after reverse: ${reversed}`); 
 
        repeatAsync(reversed, 2, function (repeated) { 
            console.log(`after repeat: ${repeated}`); 
        }); 
    }); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

我们先发起 upperAsync 操作，在回调函数中发起 reverseAsync ;而在 reverseAsync 的回调函数，我们还需要发起 repeatAsync 操作;repeatAsync 操作的回调函数将得到最终处理结果。

回调函数层层嵌套，代码缩进也越来越深。请看 console.log 语句，一个比一个深。这个例子才串联了三个异步操作，看着就这么费劲。如果异步操作很多，又该怎么办呢?

Promise

为了解决层层嵌套的回调地狱，前端先驱们发明了 Promise 。Promise 是一种特殊的对象，代表异步操作的执行结果(未来)：既可能是成功，也可能是失败。

创建 Promise 对象，我们需要先准备一个执行器。执行器是一个函数，它接收两个参数：

resolve 函数，执行成功时调用，将执行结果告诉 Promise ;
reject 函数，执行失败时调用，将错误原因告诉 Promise ;

通过 Promise 对象的 then 方法可以注册成功时执行的回调函数;通过 catch 方法可以注册失败时的回调函数。

以 upperAsync 操作为例：

const data = "abc"; 
 
const promise = new Promise(function (resolve) { 
    upperAsync(data, function (uppered) { 
        resolve(uppered); 
    }) 
}); 
 
promise.then(function (uppered) { 
    console.log(`after upper: ${uppered}`); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

创建 Promise 对象，执行器执行 upperAsync 操作，结果通过 resolve 告诉 Promise ;
调用 Promise 对象 then 方法注册回调函数，当 upperAsync 操作完成后执行，输出操作结果;

这个例子乍一看似乎将问题复杂化了，代码也繁琐了许多。如果将异步操作预先封装成 Promise 版本，情况就好很多。以 upperAsync 操作为例，将其封装成 Promise 版本 upperPromise ：

function upperPromise(data) { 
    return new Promise(function (resolve) { 
        upperAsync(data, function (uppered) { 
            resolve(uppered); 
        }); 
    }); 
} 
1.
2.
3.
4.
5.
6.
7.

这样我们只需调用 upperPromise ，得到一个 Promise 对象，代表未来的执行结果。然后我们执行 Promise 对象的 then 方法，注册操作成功时的回调函数，对结果进行输出：

const data = "abc"; 
 
upperPromise(data).then(function (uppered) { 
    console.log(`after upper: ${uppered}`); 
}); 
1.
2.
3.
4.
5.

代码看着清爽了很多，但感觉也只是换了种写法而已?

链式调用

Promise 真正的杀手锏是链式调用：

then 方法里面可以发起另一个异步操作，返回 Promise 对象;

then 方法后面可以再次调用 then 方法，为新 Promise 对象注册回调函数;

这样一来，通过 Promise 链式调用，我们可以将多个异步操作串联起来，再也不用层层嵌套：

const data = "abc"; 
 
upperPromise(data).then(function (uppered) { 
    console.log(`after upper: ${uppered}`); 
    return reversePromise(uppered); 
}).then(function (reversed) { 
    console.log(`after reverse: ${reversed}`); 
    return repeatPromise(reversed, 2); 
}).then(function (repeated) { 
    console.log(`after repeat: ${repeated}`); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

执行 upperPromise 操作得到一个 Promise 对象;
执行 then 方法注册回调函数，操作成功时打印结果并发起 reversePromise 操作;
then 回调函数返回 reversePromise 操作的 Promise ，第二个 then 为它注册回调函数;
当 reversePromise 成功完成，执行第二个 then 回调，打印结果并发起 repeatPromise 操作;
第三个 then 为 repeatPromise 返回的 Promise 注册回调函数，打印最终结果;

有了链式调用，可以很清晰地串联多个异步操作，而不用一层又层地嵌套回调函数。注意到，每个 console.log 语句的缩进都是一样的，它们都属于同一层。这种写法更符合人的直观感受——程序从上往下依次执行。

异步函数

后来 ES 又引入了异步函数，彻底解决了这个问题。

异步函数是指被 async 修饰的函数，在其内部可以通过 await 关键字来等待 Promise 对象的最终结果。当 Promise 对象兑现后，await 语句便可结束等待，并取得结果。

我们将上面的例子改为异步函数版本，看着舒服多了：

async function process(data) { 
    const uppered = await upperPromise(data); 
    console.log(`after upper: ${uppered}`); 
 
    const reversed = await reversePromise(uppered); 
    console.log(`after reverse: ${reversed}`); 
 
    const repeated = await repeatPromise(reversed, 2); 
    console.log(`after repeat: ${repeated}`); 
} 
 
const data = "abc"; 
process(data); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.