TypeScript async / await 入门介绍与使用

Z时代
2024-01-10
分类：综合

从 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 和箭头函数重写我们之前的示例。


constresolver = (msg, timeout) => newPromise((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# 社区中是众所周知的。它们允许我们以更同步的方式编写异步代码。让我们使用这些特性再次重写我们的示例。


constresolver = (msg, timeout) => newPromise((resolve) => {
console.log(msg);
setTimeout(resolve, timeout);
});
asyncfunctionrun() {
awaitresolver('First', 1000);
awaitresolver('Second', 500);
awaitresolver('Third', 1000);
awaitresolver('Fourth', 500);
}
run();