JS中的异步函数是什么?什么是JS中的async和await? [英] What are Asynchronous functions in JS? What is async and await in JS?

问题描述

此问答旨在为以下问题提供清晰的答案:

This Q&A is aimed to give clear answers to the following questions:

• 什么是JS中的异步函数?何时以及如何使用它们?
• JS中的 async ， await 关键字是什么，它们与异步功能有什么关系?

• What are asynchronous functions in JS and when and how do we use them?
• What are the async, await keywords in JS and how do they relate to async functions?

要遵循答案，必须满足以下先决条件:

To follow the answer the following prerequisites are required:

• 对JS异步编程模型的了解
• ES6 Promise对象的知识

推荐答案

简介

JavaScript具有异步模型.每当异步动作完成时，您通常都希望随后执行一些代码.第一个回调是通常用来解决这个问题.但是，在对具有多个异步元素的代码进行编程时，使用回调会出现问题.因为当您在彼此之间嵌套多个回调时，代码变得很难快速维护.这种反模式称为回调地狱.

Promise解决了嵌套回调中出现的许多问题.许诺的一个关键特性是可以使用 promise链将它们很好地链接在一起.与回调相比，这使语法更加简洁，并且更易于处理错误.这是一个示例:

Promises solved many of the issues that appeared in nested callbacks. A key property of promises are that they can be nicely chained together using a promise chain. This allows for much cleaner syntax than callbacks and easier error handling. Here is an example:

const randomProm = new Promise((resolve, reject) => {
   if (Math.random() > 0.5) {
     resolve('Succes');
   } else {
     reject('Failure');
   }
  
});

// Promise chain
randomProm
  .then((value) => {
    console.log('inside then1');
    console.log(value);
    return value
}).then((value) => {
    console.log('inside then2');
    console.log(value);
    return value
}).catch((value) => {
    console.log('inside catch');
    console.log(value);
});

异步功能建立在promise之上.它们允许更方便地使用Promises.异步函数具有以下属性:

Asynchronous functions are built on top of promises. They allow a more convenient use of Promises. Asynchronous functions have the following properties:

在函数声明/表达式之前将
• async 转换为异步函数.顾名思义，异步函数是异步执行的.
• 异步函数总是返回promise .它将所有返回的值包装在 Promise.resolve(returnval)中.但是，当在异步函数中引发未捕获的错误时，它将返回值包装在 Promise.catch(returnval)中.
• 在异步函数中，您可以使用 await 关键字，该关键字可以在任何承诺之前使用. await 使JS代码执行停止，直到兑现承诺为止.也就是说，在执行异步功能内的任何其他代码之前，必须履行或拒绝诺言.
• await 或者返回已兑现承诺的值，或者在被拒绝承诺的情况下引发错误.我们可以使用常规try-catch来捕获错误.

• async before a function declaration/expression turns the function into an async function. As the name suggests async function are executed asynchronously.
• An async function always returns a promise. It wraps any returned value in Promise.resolve(returnval). However, when an uncaught error is thrown inside the async function it wraps the return value in Promise.catch(returnval).
• Inside async functions you can use the await keyword which can be used before any promise. await makes JS code execution stop until the promise is settled. i.e. The promise has to be either fulfilled or rejected until any further code inside the async function is executed.
• await either returns the value of the fulfilled promise, or throws an error in the case of a rejected promise. We can use regular try-catch to catch the error.

让我们用一些例子来阐明这一点:

Let's clarify this with some examples:

const randomProm = new Promise((resolve, reject) => {
    if (Math.random() > 0.5) {
        resolve("Succes");
    } else {
        reject("Failure");
    }
});

// async keyword creates an async function which returns a promise 
async function ansyncExample() {

    try {
        const outcome = await randomProm;
        console.log(outcome);
    } catch (error) {
        console.log(error);
    }

    // This return value is wrapped in a promise
    return 'AsyncReturnVal';
}

// ansyncExample() returns a promise, we can call its corresponding then method
ansyncExample().then((value) => {
    console.log(value);
});

console.log('I get executed before the async code because this is synchronous');

// We can use async in function expressions
const randomProm = async () => {
    if (Math.random() > 0.5) {
        // This value is wrapped in Promise.resolve()
        return "Succes";
    } else {
        // This value is wrapped in Promise.reject()
        throw "Failure";
    }
};

// async keyword creates an async function which returns a promise
async function ansyncExample() {
    // randomProm is async fuction which returns a promise which we can await
    return await randomProm();
}

// ansyncExample() returns a promise, we can call its corresponding then/catch method
ansyncExample()
    .then((value) => {
        console.log("Inside then");
        console.log(value);
    })
    .catch((value) => {
        console.log("Inside catch");
        console.log(value);
    });

console.log("I get executed before the async code because this is synchronous");

理论上，您每次使用诺言时都可以使用异步功能.但是，当有多个异步操作返回承诺并相互依赖时，异步功能的功能真正开始发挥作用.

In theory you could use async function everytime when you are using a promise. However the power of async functions really starts to shine when there are multiple async operations that return promises and which depend on each other.

因为异步功能允许我们以同步方式编写基于异步承诺的代码.代码仍然是异步的，但我们现在可以以同步方式读取.它比promise链更易于阅读和维护，因此扩展性更好(IMO).

Because async function allow us to write asynchronous promise based code in a synchronous manner. The code is still asynchronous but we can now read it in a synchronous manner. It is more easily read and maintained than promise chains and thus scales better (IMO).

以下是这种可读性的一个示例:

Here is an example of this nice readability:

async function ansyncExample() {
    try {
        // 3 async operations which depend on each other
        const firstValue = await firstAsyncFunc();
        const SecondValue = await secondAsyncFunc(firstValue);
        const ThirdValue = await thirdAsyncFunc(SecondValue);
    } catch (error) {
        console.log(error);
    }

    return ThirdValue;
}

这篇关于JS中的异步函数是什么?什么是JS中的async和await?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！