对async/await的理解

YFan 发布于2019-08-23 17:10 / 3128人阅读

摘要：异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的返回其结果。如果函数中是一个值，这个值就是对象中的值如果函数中是一个值，这个值就是对象中的值。总结是在之后产生的，它和诞生的目的都是为了解决回调地狱，至于什么是回调地狱改进后改进后

async 函数

先看看MDN上怎么介绍的：

async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数，它的语法和结构会更像是标准的同步函数。

如果async函数中是return一个值，这个值就是Promise对象中resolve的值；

如果async函数中是throw一个值，这个值就是Promise对象中reject的值。

async函数的写法

async function imAsync(num) {
  if (num > 0) {
    return num // 这里相当于resolve(num)
  } else {
    throw num // 这里相当于reject(num)
  }
}

imAsync(1).then(function (v) {
  console.log(v); // 1
});

// 注意这里是catch
imAsync(0).catch(function (v) {
  console.log(v); // 0
})

Promise的写法

function imPromise(num) {

  return new Promise(function (resolve, reject) {
    if (num > 0) {
      resolve(num);
    } else {
      reject(num);
    }
  })
}

imPromise(1).then(function (v) {
  console.log(v); // 1
})

imPromise(0).then(function (v) {
  console.log(v); // 0
})

await

await会暂停当前async函数的执行，等待后面的Promise的计算结果返回以后再继续执行当前的async函数。

如果单纯的 await setTimeout(...)是行不通的，await 不是什么都等，它等待的只是Promise，你如果没有给他返回个Promise，那它还是会继续向下执行。
所以 await 等待的不是所有的异步操作，等待的只是Promise。

总结

async/await是在Promise之后产生的，它和Promise诞生的目的都是为了解决“回调地狱”，至于什么是回调地狱：

Promise改进后：

async/await改进后：

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

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

令人费解的 async/await 执行顺序

摘要：问题的关键在于其执行过程中的微任务数量，下文中我们需要用上述代码中的方式对微任务的执行顺序进行标记，以辅助我们理解这其中的执行过程。原文发布在掘金社区：https://juejin.im/post/5c3cc981f265da616a47e028 起源 2019年了，相信大家对 Promise 和 async/await 都不再陌生了。前几日，我在社区读到了一篇关于 async/...

WilsonLiu95 2019-08-23 14:50 评论0 收藏0
从async await 报错Unexpected identifier 谈谈对上下文的理解

摘要：解决办法，将箭头函数声明为函数，代码如下运行结果至此，问题解决。必须在函数的上下文中。对程序而言有了上下文调用帧才有一个完整的逻辑过程。先简单介绍下async await：　　async/await是ES6推出的异步处理方案，目的也很明确：更好的实现异步编程。详细见阮大神 ES6入门现在说说实践中遇到的问题：使用await报错Unexpected identifier 先...

Bryan 2019-08-22 11:06 评论0 收藏0
理解 JavaScript 的 async/await

摘要：因为函数返回一个对象，所以可以用于等待一个函数的返回值这也可以说是在等函数，但要清楚，它等的实际是一个返回值。帮我们干了啥作个简单的比较上面已经说明了会将其后的函数函数表达式或的返回值封装成一个对象，而会等待这个完成，并将其的结果返回出来。随着 Node 7 的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaSc...

tracymac7 2019-08-20 12:24 评论0 收藏0
[译]带你理解 Async/await

摘要：所以是在一秒后显示的。这个行为不会耗费资源，因为引擎可以同时处理其他任务执行其他脚本，处理事件等。每个回调首先被放入微任务队列然后在当前代码执行完成后被执行。，函数是异步的，但是会立即运行。否则，就返回结果，并赋值。「async/await」是 promises 的另一种更便捷更流行的写法，同时它也更易于理解和使用。 Async functions 让我们以 async 这个关键字开...

xiaochao 2019-08-23 18:09 评论0 收藏0
8张图帮你一步步看清 async/await 和 promise 的执行顺序

摘要：第部分画图一步步看清宏任务微任务的执行过程我们以开篇的经典面试题为例，分析这个例子中的宏任务和微任务。注意这里只是把推入微任务队列，并没有执行。执行结束，才能继续执行后面的代码如图此时当前宏任务都执行完了，要处理微任务队列里的代码。 8张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章？测试一下自己有没有必要看需要具备的前置基础知识主...

weizx 2019-08-23 13:51 评论0 收藏0