理解ES7中的async函数

curried 发布于2019-08-23 11:46 / 2255人阅读

摘要：什么是标准引入了函数，使得异步操作变得更加方便。顾名思义是异步的意思，用于声明一个函数是异步的。的作用正常情况下，命令后面是一个对象。表示函数等待返回结果了，再继续执行。上面便是一种错误用法，并没有在函数执行上下文中，而是在的回调函数中。

什么是Async、await

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async顾名思义是“异步”的意思，用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。

基本用法 async函数的返回值

既然async函数是声明一个异步函数，那么我们如何知道这个函数是否执行完成呢。我们观察一下async函数的返回值就明白了。

async function lxcAsync() {
    return "LXC";
}

console.log(lxcAsync()); // Promise { "LXC" }

代码输出的结果是Promise { "LXC" }，可见async函数返回的是一个Promise对象，因此我们可以使用then方法添加回调函数，从而处理async函数返回的结果。

async function lxcAsync() {
    return "LXC";
}

lxcAsync().then((data) => {
    console.log(data);   // LXC
});

await的作用

正常情况下，await命令后面是一个 Promise 对象。当然也可以是原始类型和非Promise对象，但会被转成一个立即resolve的 Promise 对象，这是等同于同步操作。await表示函数等待promise返回结果了，再继续执行。

function delay() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("LXC");
        }, 2000);
    })
}

async function lxcAsync() {
    let de = await delay();
    console.log(de); //  2s后输出LXC
}
lxcAsync();

注意点 await关键字只能用于async函数执行上下文中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

上面便是一种错误用法，await并没有在lxcAsync函数执行上下文中，而是在setTimeout的回调函数中。

async function lxcAsync() {
   setTimeout(() => {
     await 1;   //await is only valid in async function
   },1000)
}
lxcAsync();

如果我们希望在某个异步函数的回调函数中使用await（如果使用过jest，应该会知道jest的异步测试就有这种需求）,我们可以使用下列方式

function lxcAsync() {
   setTimeout(async () => {
     await 1;
   },1000)
}
lxcAsync();

reject错误处理

如果await后面的Promise对象返回的是reject，那么我们需要如何处理呢？这时我们需要try-catch来处理。

function delay() {
    return new Promise((resolve, reject) => {
        reject("LXC");
    })
}

async function lxcAsync() {
    try {
        let de = await delay();
        console.log(de); 
    } catch (error) {
        console.log(error);  //输出LXC
    }

}
lxcAsync();

GPU云服务器云服务器这个函数怎么理解你理解中的云服务器ecs是什么 javascript中的函数 php中的变量函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97435.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
翻译：Taming the asynchronous beast with ES7

摘要：让我们使用它从数组中返回一个值数组在中，我们可以这样做，这是一种更简单的方法最重要的部分是创建数组，该数组立即调用所有的我们在主函数中等待这些。所以在我们真正等待完成之前，主函数就退出了。原文：https://pouchdb.com/2015/03/0... PouchDB最棘手的方面之一是它的API是异步的。在Stack Overflow、Github和IRC上，我看到了不少困惑的...

Eastboat 2019-08-23 18:31 评论0 收藏0
ES6&ES7中的异步之async函数

摘要：更好的语义和分别表示异步和等待，比起和更容易理解。前边声明关键字，表示内部有内部操作，调用函数会返回一个对象。等价于其中函数就是自动执行器。 async函数定义 async函数其实就是之前说过的Generator的语法糖，用于实现异步操作。它是ES2017的新标准。读取两个文件: const fs = require(fs) const readFile = function(f...

dongxiawu 2019-08-21 17:36 评论0 收藏0
快速理解和使用 ES7 await/async

摘要：是最重要特性之一，它是目前为止最佳的异步解决方案了。虽然没有在中录入，但很快就到来，目前已经在阶段。表示暂停，表示执行下一步，如果你不了解也没关系，可以忽略它直接学习。 await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next Stage 4 阶段。直接上例子，比如我们需要...

Kross 2019-08-20 11:35 评论0 收藏0
用co玩转异步

摘要：否则不会得到异步之后的值对象的值，并没有在中进行处理，而是直接作为返回值返回到对象外面了这就是的魔法。当生成器函数内的逻辑执行完毕且没有错误之后，这个对象返回值变为状态，且将生成器的返回值作为出来的值。之前我在关于Promise的文章中提到了co这个库。在这篇文章里，我将写一写自己对它的认识。 Trust me，用了co库，你不想用别的，来它半斤异步调用你一口能吃仨。但是我对Tj大...

microelec 2019-08-20 10:31 评论0 收藏0