美文网首页
Learn async/await

Learn async/await

作者: szu_bee | 来源:发表于2018-02-01 16:03 被阅读25次

JavaScript的异步处理方案由最初让人头疼的callback hell,到ES6加入了抽象异步处理对象的Promise,在思想上已经有了质的飞跃,后来出现的Generator Function改成了趋向于同步的写法,使用yield标记异步操作中需要暂停的地方,通过next()移动指针等等,但这样做语义不太直观,到最后终于出现了一种被称为终极解决方案的方案,加入了ES7中,它就是async/await。

async/await本质上是在操作Promise,所以还是异步

const sleep = time =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('ok')
    }, time)
  })

async function start() {
  let result = await sleep(3000)
  console.log(result)
}

start()
​
// async函数返回一个Promise对象
start()
  .then(() => {
    console.log('hello')
  })

await后面的Promise对象,如果需要捕捉异常(运行结果是rejected)有如下两种写法:

const sleep = time =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('error')
    }, time)
  })

// .catch 捕捉
async function start() {
  let result = await sleep(3000).catch(err => {
    console.error(err)
  })
}

// try/catch 语句
async function start() {
  try {
    let result = await sleep(3000)
    console.log(result)
  } catch (err) {
    console.error(err)
  }
}

异步循环

async function start() {
  for (let i = 0; i < 5; i++) {
    console.log(i)
    await sleep(1000)
  }
}

注意,await 只能在 async 函数中,如果用在普通函数(如forEach)中会报错。

如果需要多个请求并发执行,可以使用Promise.all(),用法详见上一篇文章。

async function concurrency() {
  await Promise.all(promises)
}

此外,有一篇文章介绍了一些错误处理和动态运算的解决方案,可以学习一下

相关文章

  • Learn async/await

    JavaScript的异步处理方案由最初让人头疼的callback hell,到ES6加入了抽象异步处理对象的Pr...

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

  • nodejs async 使用简介

    async await node async 使用

  • JS 中的 async/await

    async/await 是什么? async/await 是 ES2017 中新增的异步解决方案; await 只...

  • ES2017 async 函数

    async 和 await 在干什么 每个名称都有意义async : 异步await: async wait简...

  • async/await

    async/await async/await 是Generator的语法糖。 Generator 通过将Gene...

网友评论

      本文标题:Learn async/await

      本文链接:https://www.haomeiwen.com/subject/joidzxtx.html