1 分钟读完《10 分钟学会 JavaScript 的 Async/Await》

97

1 分钟读完 JavaScript Async/Await Explained in 10 Minutes

10 分钟学会 JavaScript 的 Async/Await

以前我们使用 callback。

后来我们使用 Promise。

现在我们使用 Async/Await。

1、什么是 Async/Await?

Async - 定义异步函数(async function someName(){...})

  • 自动把函数转换为 Promise
  • 当调用异步函数时,函数返回值会被 resolve 处理
  • 异步函数内部可以使用 await

Await - 暂停异步函数的执行 (var result = await someAsyncCall();)

  • 当使用在 Promise 前面时,await 等待 Promise 完成,并返回 Promise 的结果
  • await 只能和 Promise 一起使用,不能和 callback 一起使用
  • await 只能用在 async 函数中

2、Async/Await 是否会取代 Promise

不会。

  • Async/Await 底层依然使用了 Promise。
  • 多个异步函数同时执行时,需要借助 Promise.all
async function getABC() {
  let A = await getValueA(); // getValueA 花费 2 秒
  let B = await getValueB(); // getValueA 花费 4 秒
  let C = await getValueC(); // getValueA 花费 3 秒

  return A*B*C;
}

每次遇到 await 关键字时,Promise 都会停下在,一直到运行结束,所以总共花费是 2+4+3 = 9 秒。await 把异步变成了同步

async function getABC() {
  // Promise.all() 允许同时执行所有的异步函数
  let results = await Promise.all([ getValueA, getValueB, getValueC ]); 

  return results.reduce((total,value) => total * value);
}

函数总耗时为 4 秒(getValueB 的耗时)。

3、Async/Await 的错误处理

在 Async/Await 语法中,我们可以使用 try/catch 进行错误处理。在 Promise 中的 .catch() 分支会进入 catch 语句。


阅读原文:JavaScript Async/Await Explained in 10 Minutes

讨论地址:10 分钟学会 JavaScript 的 Async/Await

如果你想参与讨论,请点击这里


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

16 条评论
liupengc · 2017年11月02日

不错,future promise deffered 以及新加的async和await都实现了异步操作,谢谢!

+5 回复

2

@liupengc f p d 的 f d 是什么

龙腾道 · 2017年11月02日
1

都实现了 异步变同步吧

摩羯座 · 2017年11月02日
1

对,是的. 比如python3也把 async 和 await 做为标准库来提供了.

liupengc · 2017年11月02日
张巨侠 · 2017年11月01日

非常不错

+4 回复

闹心i · 2017年11月02日

好磨叽

+3 回复

semix · 2017年11月03日

c# n年前就实现的语法糖

+2 回复

Salamander · 2017年11月02日

C#很早也加入了await和async

+1 回复

炎燚 · 2017年11月22日

2+4+3 = 9 秒。 不对吧

+1 回复

1

async function getABC() {
let A = await getValueA(); // getValueA 花费 2 秒
let B = await getValueB(); // getValueA 花费 4 秒
let C = await getValueC(); // getValueA 花费 3 秒

return ABC;
}
本地测试 就 4秒多啊

炎燚 · 2017年11月22日
0

@炎燚

async function getABC() {

  console.time('test')
  let A = await getValueA(); // getValueA 花费 2 秒
  let B = await getValueB(); // getValueA 花费 4 秒
  let C = await getValueC(); // getValueA 花费 3 秒
  console.timeEnd('test')

  return A*B*C;
}

测一下

justjavac 作者 · 2017年11月22日
1

@炎燚 我的测试结果 test: 9005.33984375ms

justjavac 作者 · 2017年11月22日
sheldon_wang · 2017年11月07日

以前不知道,但在写unity时用过c#, 里边就是这么写的

回复

载入中...