TypeScript 如何创建异步函数

TypeScript 如何创建异步函数

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

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

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

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

语法

用户可以按照下面的语法,在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关键字只是暂停了异步函数的执行,其他代码可以继续执行。一旦承诺解决了,它又开始执行。

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

例子

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

在输出中,用户可以观察到,在打印函数中的数据变量的值之前,它打印了 “函数执行后”。因此,我们可以从中了解到,当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构造函数来创建和解析这个承诺。此外,我们还从samplePromise()函数中返回了承诺。

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

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来获取数据。异步函数提高了单线程应用程序的性能。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

TypeScript 教程