JavaScript 中的 Promise（使用 yarn 和乐高积木）

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

简而言之：创建一个 Promise 对象会分离出一条新的执行路径，而 Promise 对象则代表该路径的终点。调用 `.then` 方法会在该路径的末尾添加代码。

你可以把程序的执行想象成沿着一根线绳行进。这段视频演示了同步程序和使用 Promise 的同一程序之间的区别：

Promise 可以让你明确地说明接下来需要做什么，同时比“这些事情按顺序一件一件地发生”（简单同步程序的默认流程）更灵活。

缺点在于，当你想要指定“在执行完某个 Promise 之后执行此操作”时，你必须将该代码打包并传递给 `.then()`。Promise 对象保存着 yarn 的执行路径的末尾部分；`.then()` 会将更多代码附加到该末尾部分并返回新的末尾部分。

在 readConfig 函数中可以看到这一点，该函数读取文件并解析其内容。同步版本按照程序通常的执行路径运行：readFileSync 函数检索一些数据，然后 JSON.parse 函数将其转换为有用的对象。

在使用了 Promise 的版本中，`readConfig` 会立即返回，但它返回的是一个字符串的末尾部分。这个字符串包含了 `readFile`，它会获取一些数据；而通过 `.then()` 连接的是 `JSON.parse`，它会将这些数据转换成一个有用的对象。

这个有用的对象将位于橙色字符串的末端，供之后连接到它的任何代码使用。

在这方面，Promise 比回调函数更胜一筹：启动异步任务时，你无需提供所有后续需要执行的代码。只要你保留好字符串的末尾，就可以稍后添加更多代码。

别丢掉字符串的末尾！如果不需要它来添加更多代码，请用 `.catch()` 将字符串妥善地结束——否则，一个游离的字符串末尾可能会导致错误，从而破坏你的程序。（我可以再做一个视频来讲解这个。）

Promise 并不比回调函数好，因为你仍然需要将后续代码封装到一个函数中。当 `.then()` 调用嵌套 `.then()` 调用时，代码会变得非常混乱。但是等等！别灰心！

在 TypeScript 和 ES_2018 中，我们可以使用 async 和 await 以同样简洁的格式编写异步代码。虽然代码看起来几乎与同步版本相同，但其执行路径更类似于Promise。

异步函数会立即返回——不要被最后那个 return 语句迷惑。它会划分出一条执行路径，这条路径会执行（这里是读取文件），直到遇到 await 关键字。剩余的代码（解析）会变成另一段字符串。await 的作用类似于 .then()，将字符串连接起来（但更简洁）。异步函数的末尾是一个 return 语句，它返回字符串末尾的值。异步函数总是返回一个 Promise。

Promise 赋予你更多控制权，但也意味着你需要思考更多。这意味着它们总是比同步代码更复杂。而 async 和 await 则兼具控制权和清晰度：Avdi称之为“直线型代码，遇到问题时会自动跳转到工作队列”。不要害怕 Promise，请放心使用 TypeScript，并务必注意字符串的结尾。