在TypeScript中如何创建异步函数

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

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

像TypeScript和JavaScript这样的单线程编程语言从不停止代码的执行。因此，它不会等待API的响应，而是开始在null值上执行某些操作。

当我们将函数设为异步时，它会暂停执行特定的代码块，直到我们从API获取响应。因此，我们可以操纵数据而不是操纵null值。

语法

用户可以遵循以下语法，在TypeScript中将函数设为异步。

async function func1() {
   await resolvePromise();
   // this code will not be executed until the promise is resolved
}

func1();
// this code will execute even if the promise is not resolved.

在上述语法中，我们在函数之前使用了async关键字使其变成异步函数。此外，我们使用了await关键字来暂停函数的执行，直到我们从promise中得到一个响应。

因此，await关键字只会暂停异步函数的执行，其他代码可以继续执行。一旦promise解析完成，它将重新开始执行。

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

示例

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

在输出中，用户可以观察到它在打印函数中的数据变量值之前打印了“After function execution”。所以，我们可以从中学到当await关键字暂停函数的执行时，它开始执行其他代码，这提高了应用程序的性能。

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

console.log("Before function execution");
test();
console.log("After function execution");

在编译时，它将生成以下JavaScript代码 –

"use strict";
async function test() {
   let data = await "default string";
   console.log("The value of data is " + data);
}
console.log("Before function execution");
test();
console.log("After function execution");

输出

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

Before function execution
After function execution
The value of data is default string

示例2

在这个示例中，samplePromise()函数包含了一个promise。我们使用Promise构造函数来创建和解决这个promise。并且，我们从samplePromise()函数中返回了这个promise。

executeAsync()函数使用await关键字调用samplePromise()函数。用户可以观察输出，await关键字会暂停executeAsync()函数的执行，直到promise被满足。

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

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("Before calling a function");
executeAsync();
console.log("After calling a function");

编译时，它将生成相同的JavaScript代码 –

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

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("Before calling a function");
executeAsync();
console.log("After calling a function");

输出

它将产生以下输出 –

Before calling a function
After calling a function
Successfully resolved

在这个教程中，用户学习了如何创建一个异步函数。同时，我们还学习了如何使用async/await关键词与Promise一起获取数据。异步函数可以提高单线程应用程序的性能。