美文网首页
async await 全解

async await 全解

作者: littleyu | 来源:发表于2021-05-09 15:27 被阅读0次

前端似乎对 Promise 不满

优点

Async/Await替代Promise的6个理由

但是,除了更简洁意外,其他理由似乎都不是很有说服力。

为什么需要 async ?

看起来非常多余,await 所在的函数就是 async ,不是吗?

已经搜索发现,在 await 之前,已经有人实现了 await 函数,她的函数是这样的:

function fn () {
  const result = await(xxx())
}

所以如果 JS 一发布这个语法,那么这个人就不能继续运行她的代码了,所以为了避免这种情况,JS 只能强行加一个 async 关键词(虽然没有任何实质意义)作区分(用心良苦,为了兼容旧代码里普通函数的await),继而保证大家都能使用。

如何优雅的处理错误

const ajax = function () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject({ status: 403, message: '无权限' })
    }, 2000)
  })
}

const errHandler = err => {
  console.log(err)
  throw err
}

async function fn () {
  const res = await ajax().catch(errHandler)
  console.log('继续运行接下来的代码')
}
fn()

上述的 errHandler 之所以最后 throw err 是因为,如果直接 return 一个值,会被直接赋值给 res,所以直接使用 throw err 还能打断程序进程,防止下面的代码继续运行。

缺点

具有传染性
console.log(1)
await console.log(2)
console.log(3)

console.log(3) 变成异步任务了,
Promise 同样具有传染性,then 里面都是异步,除非直接写在 下面。
谁没有传染性:回调。

天生串行
await ajax1()
await ajax2()
await ajax3()
await ajax4()

其中有一个陷阱关于循环的陷阱

const ajax1 = () => new Promise(resolve => {
  setTimeout(() => {
    console.log('ajax1')
    resolve()
  }, 2000)
})
const ajax2 = () => new Promise(resolve => {
  setTimeout(() => {
    console.log('ajax2')
    resolve()
  }, 2000)
})
const ajax3 = () => new Promise(resolve => {
  setTimeout(() => {
    console.log('ajax3')
    resolve()
  }, 2000)
})
const fn = async () => {
  const array = [ajax1, ajax2, ajax3];
  for (let i = 0; i < array.length; i++) {
    await array[i]()
  }
}
fn()

用普通的 for 循环是正常的

const ajax1 = () => new Promise(resolve => {
  setTimeout(() => {
    console.log('ajax1')
    resolve()
  }, 2000)
})
const ajax2 = () => new Promise(resolve => {
  setTimeout(() => {
    console.log('ajax2')
    resolve()
  }, 2000)
})
const ajax3 = () => new Promise(resolve => {
  setTimeout(() => {
    console.log('ajax3')
    resolve()
  }, 2000)
})

const fn2 = async () => {
  const array = [ajax1, ajax2, ajax3];
  array.map(async ajax => await ajax())
}
fn2()

当用 map 遍历的时候,就会同时运行三个 ajax

相关文章

  • async await 全解

    前端似乎对 Promise 不满 优点 Async/Await替代Promise的6个理由[https://blo...

  • 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 只...

  • async 与 await 的使用

    按词解意 顾名思义 async 即异步 await 即为等待 使用 1.当调用一个 async 函数时...

  • ES2017 async 函数

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

网友评论

      本文标题:async await 全解

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