迹忆客 专注技术分享

从 1.7 版本开始，TypeScript 中提供了 async / await 关键字。 在新版本发布之前，它们被转换为使用 yield 的生成器函数。 在 2.1 中，async 和 wait 终于降级到 ES3 和 ES5，所以现在，我们可以使用这些特性来对浏览器进行兼容

地狱式的回调

JavaScript 是一种令人难以置信的强大语言。 通过其事件循环和非阻塞 I/O 特性，我们可以轻松构建异步应用程序。 过去，为了实现基于事件的结构，我们使用回调。 有时我们的代码如下所示：

setTimeout(function() {
    console.log('First');
    setTimeout(function() {
        console.log('Second');
        setTimeout(function() {
            console.log('Third');
            setTimeout(function() {
                console.log('Fourth');
            }, 500);
        }, 1000);
    }, 500);
}, 1000);

这是一个回调地狱。 可能，如果我们的代码更复杂，其他人要尝试理解它是相当的困难的

这不是一个好的解决方案。 他们有很多方法来处理它。 最常见的是 promise 。

什么是 Promise？

Promise 只是一个代表任务的对象。 它可能会立即完成，也可能会在一段时间内完成。 我们可以通过将回调传递给其 then 函数来与“任务”进行交互。 让我们使用 Promises 和箭头函数重写我们之前的示例。

const resolver = (msg, timeout) => new Promise((resolve) => {
    console.log(msg);
    setTimeout(resolve, timeout);
});
resolver('First', 500)
    .then(() => resolver('Second', 500))
    .then(() => resolver('Third', 1000))
    .then(() => resolver('Fourth', 500));

看起来更简单，且更易于阅读——结果是相同的。

async / await

async 和 await 关键字在 C# 社区中是众所周知的。 它们允许我们以更同步的方式编写异步代码。 让我们使用这些特性再次重写我们的示例。

const resolver = (msg, timeout) => new Promise((resolve) => {
    console.log(msg);
    setTimeout(resolve, timeout);
});
async function run() {
    await resolver('First', 1000);
    await resolver('Second', 500);
    await resolver('Third', 1000);
    await resolver('Fourth', 500);
}
run();

它也做同样的事情。 对其工作原理的最简单解释是 await 接受一个 Promise 并等待直到任务完成。 如果方法至少有一个 await 关键字，则它必须在函数声明之前有 async 关键字。 就这样。