async await

zone 发布于2019-08-26 10:48 / 2730人阅读

摘要：由此可以知道等待的就是右边表达式的运行结果也就是的返回结果，再接着往下运行。在打印的顺序一定是，再到，尽管是先结束倒计时，但是因为有了修饰符，所以必须等待打印完毕才可以打印。

async 标识符表明函数里可能存在异步操作
await 只能保存在async标识的函数里，普通函数no way

创建2个异步操作

// 2s后执行
let resolveAfter2second = function () {
  console.log("resolveAfter2second start");
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("slow");
    }, 2000);
  });
}
// 1s后执行
let resolveAfter1second = function () {
  console.log("resolveAfter1second start");
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("fast");
    }, 1000);
  });
}

2.异步顺序执行

let sequentialStart = async function() {
  console.log("sequentialStart ...");
  const slow = await resolveAfter2second();
  console.log(slow);
  const fast = await resolveAfter1second();
  console.log(fast);
}
sequentialStart();

这段代码的执行顺序是先等待2s，获得slow的值，接着等待1s，获取fast的值。（其实也可以把等待时间调长）。由此可以知道await等待的就是右边表达式的运行结果(也就是Promise.resolve()的返回结果)，再接着往下运行。

3.同时运行

let concurrentStart = async function() {
  console.log("concurrentStart ...");
  const slow = resolveAfter2second();
  const fast = resolveAfter1second();
  console.log(await slow);
  console.log(await fast);
}
concurrentStart();

concurrentStart方法做了小小的修改，移动了await的对象，运行可以看到slow和fast是同时开始，也就是一共等待2s（注意，不是3s，因为它们是同时开始的）。在打印的顺序一定是slow，再到fast，尽管是fast先结束倒计时，但是因为有了await修饰符，所以fast必须等待slow打印完毕才可以打印。

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

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

async & await (译)

摘要：的出现，让我们可以走出回调地狱，着实惊艳。我已经开始使用里的和关键字来简化的处理。异步任务在这个例子是执行之后，一直在执行完成才继续下一个任务并没有产生阻塞。最后这个函数处理了返回值并且返回了一个对象。依然很棒，但和使得它可维护性更好。 JavaScript Promises的出现，让我们可以走出回调地狱，着实惊艳。Promises 允许我们更好的引入和处理异步任务，虽然如此，但引入好...

The question 2019-08-22 11:07 评论0 收藏0
异步发展流程 —— 异步编程的终极大招 async/await

摘要：简介指的是两个关键字，是引入的新标准，关键字用于声明函数，关键字用来等待异步必须是操作，说白了就是的语法糖。最后希望大家在读过异步发展流程这个系列之后，对异步已经有了较深的认识，并可以在不同情况下游刃有余的使用这些处理异步的编程手段。 showImg(https://segmentfault.com/img/remote/1460000018998406?w=1024&h=379); ...

zhangfaliang 2019-08-23 12:18 评论0 收藏0
理解 JavaScript 的 async/await

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

tracymac7 2019-08-20 12:24 评论0 收藏0
8张图帮你一步步看清 async/await 和 promise 的执行顺序

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

weizx 2019-08-23 13:51 评论0 收藏0
[译]带你理解 Async/await

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

xiaochao 2019-08-23 18:09 评论0 收藏0
Async/await学习

摘要：这只是一个更优雅的得到值的语句，它比更加容易阅读和书写。总结放在一个函数前的有两个作用使函数总是返回一个允许在这其中使用前面的关键字能够使等待，直到处理结束。 Async/await 写在前面渣渣新人的首篇外文文章翻译！！存在错误可能会很多，如有错误，烦请各位大大指正出来，感谢！本篇为翻译！本篇为翻译！本篇为翻译！原文文章地址：https://javascript.info/a...

Tamic 2019-08-26 11:45 评论0 收藏0