关于对async await效率问题的深入思考

 更新时间:2022年01月29日 09:47:43   作者:kamesan  
这篇文章主要给大家介绍了关于对async await效率问题的深入思考,async和await要搭配Promise使用,它进一步极大的改进了Promise的写法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

关于async await

async await于ES2017标准引入,本身的功能是作为语法糖简化写法的。

下面列举一个使用promise的例子:

 function myPromise(flag) {
     return new Promise((resolve, reject) => {
         if (flag) {
             return resolve(flag)
         } else {
             return reject('error')
         }
     })
 }
 // 在p1的回调调用p2
 const p1 = myPromise(1)
 p1.then(v => {
     const p2 = myPromise(2)
     p2.then(v => {
         console.log(v)
     })
 })

因为p2的参数与p1的返回值有关这个例子确保了p2在p1的promise为成功的情况下再调用,确保了调用的顺序,如果只有少许的顺序要求,实现起来结构还不至于非常复杂,如果后续需要确保多个promise的调用顺序,那么就会有很多层.then去调用promise会导致代码嵌套太多,可读性差。

async await的出现解决了代码可读性的问题。

下面是一个例子:

 function myPromise(flag) {
     return new Promise((resolve, reject) => {
         if (flag) {
             return resolve(flag)
         } else {
             return reject('error')
         }
     })
 }
 let v
 const p1 = await myPromise(1)
 p1.then(val => { v = val }) 
 const p2 = await myPromise(v)
 p2.then(val => { v = val })
 const p3 = await myPromise(v)
 p3.then(val => { v = val })
 const p4 = await myPromise(v)
 p4.then(val => { v = val })
 const p5 = await myPromise(v)
 p5.then(val => { v = val })
 const p6 = await myPromise(v)
 p6.then(val => { v = val })
 const p7 =  myPromise(v)

这样就可以不依靠大量的.then嵌套去确保异步方法的调用顺序。

效率问题的思考

下面给大家看一段伪代码:

 function getData(url) {
     return url
 }
 ​
 function postData(url) {
     console.log(url)
 }
 ​
 let data1 = await getData('/xxx') // 操作1 需要花费10s
 let data2 = await getData('/xxx') // 操作2 需要花费10s
 postData(data1 + '/xxx') // 操作3 需要花费20s
 postData(data2 + '/yyy') // 操作4 需要花费5s

熟悉js事件循环的同学应该能很快求出执行所需的时间,总共需要40s去执行,那么对于这个伪代码我们可以做出优化吗?答案是可以的。

下面看一下优化后的代码:

 function getData(url) {
     return url
 }
 ​
 function postData(url) {
     console.log(url)
 }
 ​
 let data1 = await getData('/xxx') // 操作1 需要花费10s
 postData(data1 + '/xxx') // 操作4 需要花费20s
 let data2 = await getData('/xxx') // 操作2 需要花费10s
 postData(data2 + '/yyy') // 操作3 需要花费5s

这样的话执行时间就被优化到了30s,我们可以看一下二者的执行时的对比:

第一个方式

第二个方式

所以当我们使用async await时还是要去注意一下异步代码的调用顺序,适当的优化可以减少程序的运行时间,而且我们应正确的使用async await语法糖,只有后续操作需要用到异步请求所得到的数据时才需要为异步请求加上await修饰确保数据能够获取,否则不需要加await修饰。

后续

虽然可能大家觉得这个题目比较标题党,但我没有要深度剖析的意思,只是想交流讨论一下,希望大家的评论还是客气一点。 关于评论区有掘友指出我的理解有问题,这里我用setTimeout控制一下Promise的返回时间,代码如下

function t5s() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
            console.log('5s')
        }, 5000);
    })
}
function t3s() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
            console.log('3s')
        }, 3000);
    })
}
function t2s() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
            console.log('2s')
        }, 2000);
    })
}
/* 
    这里应该是等待5s后返回第一个Promise并打印5s,然后再等待3s后返回第二个Promise并打印3s,
    最后再等待2s后返回第三个Promise并打印2s,总用时10s
*/
(async () => {
    await t5s()
    await t3s()
    await t2s()
})()
/*
    这里我的理解是3个操作会依次进入微任务池中依次执行,因此2s后打印2s,3s后打印3s,5s后打印5s,总用时5s
*/
(() => {
    t5s()
    t3s()
    t2s()
})()

总结

到此这篇关于对async await效率问题的深入思考的文章就介绍到这了,更多相关async await效率问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生JS实现特效留言框

    原生JS实现特效留言框

    这篇文章主要为大家详细介绍了原生JS实现特效留言框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript小技巧整理

    JavaScript小技巧整理

    这篇文章主要介绍了JavaScript小技巧,整理汇总了JavaScript常用的6个实用技巧,属于JavaScript边角技巧的总结,需要的朋友可以参考下
    2015-12-12
  • js Map List 遍历使用示例

    js Map List 遍历使用示例

    在知道的key的情况下遍历map自然就跟数组一样的访问罗,这里就不说了,示例如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • javascript 三种数组复制方法的性能对比

    javascript 三种数组复制方法的性能对比

    javascript 三种数组复制方法的性能对比,对于webkit, 使用concat; 其他浏览器, 使用slice.
    2010-01-01
  • 详解JavaScript基于面向对象之创建对象(1)

    详解JavaScript基于面向对象之创建对象(1)

    这篇文章主要介绍了JavaScript基于面向对象之创建对象,对创建对象进行了详细描述,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • Javascript中Promise的四种常用方法总结

    Javascript中Promise的四种常用方法总结

    这篇文章主要给大家总结介绍了关于Javascript中Promise的四种常用方法,分别是处理异步回调、多个异步函数同步处理、异步依赖异步回调和封装统一的入口办法或者错误处理,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • 学好js,这些js函数概念一定要知道【推荐】

    学好js,这些js函数概念一定要知道【推荐】

    本文主要介绍了一些js函数概念,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 原生js实现计算购物车总金额的示例

    原生js实现计算购物车总金额的示例

    本文主要介绍了原生js实现计算购物车总金额的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 12个非常有创意的JavaScript小游戏

    12个非常有创意的JavaScript小游戏

    JavaScript 在Web开发过程中已经是必不可少的重要分子,他推动着Web的交互性往越来越高的层次发展,现在的很多Web游戏也基于这类语言开发。
    2010-03-03
  • 使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)

    使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)

    WEB开发中如何通过Javascript来判断终端为PC、IOS(iphone)、Android呢?可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端,下面通过本文学习下吧
    2017-01-01

最新评论