如何在 TypeScript 中创建异步函数?

typescriptjavascriptweb development

异步编程允许我们并行执行多个任务。我们可以使用 async/await 关键字使函数异步。

在开始之前,让我们了解异步编程和函数的必要性。当我们从 API 获取数据时,需要一些时间来响应。现在,想想我们需要在我们的应用中使用从 API 获得的结果。

像 TypeScript 和 JavaScript 这样的单线程编程语言永远不会停止代码的执行。因此,它不会等待 API 的响应并开始对空值执行某些操作。

当我们使函数异步时,它会暂停特定代码块的执行,直到我们从 API 获得响应。因此,我们可以操作数据,而不是操作空值。

语法

用户可以按照以下语法在 TypeScript 中使函数异步。

async function func1() {
await resolvePromise();
    // 此代码在承诺得到解决之前不会执行
}

func1();
// 即使承诺未得到解决,此代码也会执行。

在上述语法中,我们在函数前使用了 async 关键字使其异步。此外,我们使用 await 关键字暂停函数的执行,直到我们收到承诺的响应。

因此,await 关键字仅暂停异步函数的执行,其他代码可以继续执行。一旦 Promise 解析,它就会再次开始执行。

现在,让我们通过不同的例子来学习异步函数的概念。

示例

在这个例子中,我们使用 async 关键字创建了异步测试函数。在 test() 函数中,我们使用 await 关键字将函数暂停一段时间。

在输出中,用户可以观察到它在打印函数中的 data 变量的值之前打印了"函数执行后"。因此,我们可以从中了解到,当 await 关键字暂停函数的执行时,它会开始执行其他代码,从而提高应用程序的性能。

async function test(): Promise {
    let data: string = await "default string";
    console.log("The value of data is " + data);
}

console.log("函数执行前");
test();
console.log("函数执行后");

编译后,它将生成以下 JavaScript 代码 -

"use strict";
async function test() {
   let data = await "default string";
   console.log("The value of data is " + data);
}
console.log("函数执行前");
test();
console.log("函数执行后");

输出 

上述代码将产生以下输出 –

函数执行前
函数执行后
data 的值为默认字符串

示例 2

在此示例中,samplePromise() 函数包含承诺。我们使用 Promise 构造函数来创建和解析承诺。此外,我们从 samplePromise() 函数返回了承诺。

executeAsync() 函数使用 await 关键字来调用 samplePromise() 函数。用户可以在输出中观察到,await 关键字会暂停 executeAsync() 函数的执行,直到承诺得到履行。

async function samplePromise() {
const new_promise = new Promise(function (resolve, rejection) {
    resolve("Successfully solved");
   });
   return new_promise;
}

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("调用函数之前");
executeAsync();
console.log("调用函数之后");

编译时,它将生成相同的 JavaScript 代码 −

async function samplePromise() {
const new_promise = new Promise(function (resolve, rejection) {
    resolve("已成功解析");
   });
   return new_promise;
}

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("调用函数之前");
executeAsync();
console.log("调用函数之后");

输出 

它将产生以下输出 –

调用函数之前
调用函数之后
已成功解析

在本教程中,用户学习了如何创建异步函数。此外,我们还学习了如何使用 async/await 关键字和 promise 从中获取数据。异步函数可以提高单线程应用程序的性能。


相关文章