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

关于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效率问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在JS循环中使用async/await的方法

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享在JS循环中使用async/await的方法. 在开发maty.js时,遇到一个数组任务,数组项是内部异步执行的函数,期望是同步依次执行每项函数,每项函数执行完本身的异步任务后,继续下一项. 刚开始单纯使用map来循环执行,并且await每项函数.如下所示: starters.map(async (fn,

  • 关于async和await的一些误区实例详解

    微软官方的MSDN上说async和await是"异步",但是不少人(包括笔者自己)都有一些误区需要澄清:为什么await语句之后没有执行?不是异步吗? 先举一个示例代码如下: public partial class Form1 : Form { public async Task Processing() { await Task.Delay(5000); label1.Text = "Succuessful"; } public Form1() { Initia

  • 详解ES6之async+await 同步/异步方案

    异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景 先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [

  • Js中async/await的执行顺序详解

    前言 虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上

  • async/await让异步操作同步执行的方法详解

    一.前言 我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了 二.异步操作会带来什么问题 异步操作可能会许多的问题,下面是常见的两种 1.函数执行的结果并不是按照顺序返回 function fn1(){ console.log(111) setTimeout(function(){ console.log('wait

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

  • JS中async/await实现异步调用的方法

    async/await多个函数关联调用 async/await使得异步代码看起来像同步代码 async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值 Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码 async声明一个异步函数 await只能在async函数中使用,后面跟一个promise对象 所以在模拟异步调用函数时,函数体内返回promise as

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

    关于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

  • 详解async/await 异步应用的常用场景

    前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代码,从而影响执行效率.下面将简单地描述一下一些日常常用场景,加深对 async/await 认识 最普遍的异步操作就是请求,我们也可以用 setTimeOut 来简单模拟异步请求. 场景1. 一个请求接着一个请求 相信这个场景是最常遇到,后一个请求依赖前一个请求,

  • NodeJs通过async/await处理异步的方法

    场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo数据库的操作,感受一下. mongoDb.open(function(err, db){ if(!err){ db.collection("users", function(err, collection){ if(!err){ let person = {name: "yika&q

  • 详解如何让Express支持async/await

    详解如何让Express支持async/await

    随着 Node.js v8 的发布,Node.js 已原生支持 async/await 函数,Web 框架 Koa 也随之发布了 Koa 2 正式版,支持 async/await 中间件,为处理异步回调带来了极大的方便. 既然 Koa 2 已经支持 async/await 中间件了,为什么不直接用 Koa,而还要去改造 Express 让其支持 async/await 中间件呢?因为 Koa 2 正式版发布才不久,而很多老项目用的都还是 Express,不可能将其推倒用 Koa 重写,这样成本太

  • 详解C#中 Thread，Task，Async/Await，IAsyncResult的那些事儿

    详解C#中 Thread，Task，Async/Await，IAsyncResult的那些事儿

    说起异步,Thread,Task,async/await,IAsyncResult 这些东西肯定是绕不开的,今天就来依次聊聊他们 1.线程(Thread) 多线程的意义在于一个应用程序中,有多个执行部分可以同时执行:对于比较耗时的操作(例如io,数据库操作),或者等待响应(如WCF通信)的操作,可以单独开启后台线程来执行,这样主线程就不会阻塞,可以继续往下执行:等到后台线程执行完毕,再通知主线程,然后做出对应操作! 在C#中开启新线程比较简单 static void Main(string[]

  • 深入理解ES7的async/await的用法

    在最开始学习ES6的Promise时,曾写过一篇博文 <promise和co搭配生成器函数方式解决js代码异步流程的比较> ,文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同. 在文章末尾,提到了ES7的async和await,只是当时只是简单的提了一下,并未做深入探讨. 在前两个月发布的Nodejs V7中,已添加了对async和await的支持,今天就来对这个东东做一下深入的探究.以更加优雅的方法写异步代码. async/await是什么 async/await可以

  • async/await与promise（nodejs中的异步操作问题）

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • React/Redux应用使用Async/Await的方法

    Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await .虽然这个特性尚未正式发布,但是利用babel polyfill我们已经可以在应用中使用它了. 现在假设一个简单的React/Redux应用,我将引入 Async/Await 到其代码. Actions 此例子中有一个创建新文章的 Action ,传统方法是利用 Prom

随机推荐