我有一个需求如下：

有一个学生号的数组，根据这个数组，取出相关学生的所有信息。获取学生信息的接口用setTime模拟，假设每次请求需要耗时2s，代码如下

// 获取学生信息接口

function getSudent(sid) {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            const dataBase = {

                '20190101': {sid:20190101,name:'小明', age:20},

                '20190102': {sid:20190102,name:'小红', age:18},

                '20190103': {sid:20190102,name:'小青', age:17}

            }

            resolve(dataBase[sid])

        }, 2000);

    })

}

已知要得到信息的学生的数组如下：

const params = ['20190101', '20190102', '20190103']

触发动作为页面上的一个按钮，点击开始执行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div class="Wrapp">

        <button>测试</button>

    </div>

</body>

</html>

使用传统回调(需要2s，所有请求完成)

let i = 0;

async function getStart(){

    let mytimer = setInterval(() => {

        i++

        console.log(`等待了${i}秒`)

    },1000)

    let result = []

    for(let i=0; i<params.length; i++){

        getSudent(params[i]).then((res)=>{

            result.push(res);

            if(i === params.length-1){

                console.log(result); //2s

                clearTimeout(mytimer);

            }

        })

    }

}

let btn = document.querySelector('button');

btn.onclick = getStart;

使用await(需要6s，所有请求完成)

let i = 0;

async function getStart(){

    let mytimer = setInterval(() => {

        i++

        console.log(`等待了${i}秒`)

    },1000);

    let result = [];

    for(let i=0; i<params.length; i++){

        //因为这里每次请求要等2s，直至执行完成，所以优化这里即可

        let res = await getSudent(params[i]);

        result.push(res);

    }

    console.log(result)

    clearTimeout(mytimer); //6s

}

let btn = document.querySelector('button');

btn.onclick = getStart;

优化await(需要2s，所有请求完成)

let i = 0;

async function getStart(){

    let mytimer = setInterval(() => {

        i++

        console.log(`等待了${i}秒`)

    },1000);

    let result = []

    for(let i=0; i<params.length; i++){

        let res = getSudent(params[i]);

        result.push(res);

    }

    let promiseResult = await Promise.all(result);

    console.log(promiseResult); //2s

    clearTimeout(mytimer);

}

let btn = document.querySelector('button');

btn.onclick = getStart;

不过针对第一种并行回调确实没什么优化，因为那个本来就是并行，Promise.all仅是把串行请求优化为并行。

还有就是如果后一个接口依赖前一个接口返回值的话，只能是串行

综上，其实Promise.all用武之地并不多

Promise.all的使用的更多相关文章

  1. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

  2. 路由的Resolve机制（需要了解promise）

    angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...

  3. angular2系列教程（七）Injectable、Promise、Interface、使用服务

    今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...

  4. 闲话Promise机制

    Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...

  5. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  6. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  7. JavaScript进阶之路——认识和使用Promise，重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  8. 细说Promise

    一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...

  9. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

  10. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

随机推荐

  1. Hdu5178

    Hdu5178 题意: 题目给你N个点,问有多少对点的长度小于K . 解法: 首先将所给的坐标从大到小排序,则此题转化为:对排序后的新数列,对每个左边的\(x_a\)找到它右边最远的 $ x_b $ ...

  2. 利用csv文件批量编辑更新sql

    历史表(popularity_ranking)数据中只存了用户手机号,业务需求中需要新增用户昵称字段, 这里我们用户表和popularity_ranking表在不同数据库中,有两种方法:1.编写后台服 ...

  3. Docker-compose的安装和使用

    一.简介 Compose 项目 是 Docker 官方的开源项目 , 负 责实 现对 Docker 容器 集群的快速编排,其前身 是开源项目 Fig, 目前仍然兼容 Fig格式的模板文件. 使用 一个 ...

  4. shared pointer

    #include <string>#include <fstream>#include <memory>#include <cstdio> class ...

  5. 解决 Windows启动时要求验证

    KB971033 微软检测盗版jar SLMGR -REARM 出现Window启动时要求验证版本, 在cmd窗口输入命令重新配置 重新启动即可 出现错误:解决办法 开始→设置,打开控制面板的“添加和 ...

  6. Python实现的选择排序算法原理与用法实例分析

    Python实现的选择排序算法原理与用法实例分析 这篇文章主要介绍了Python实现的选择排序算法,简单描述了选择排序的原理,并结合实例形式分析了Python实现与应用选择排序的具体操作技巧,需要的朋 ...

  7. bat修改注册表

    bat添加注册表,这里只是其中一部分,以后再补充.各项参数介绍的挺详细的,认真按照语法要求写就可以. reg add "HKCU\Software\Microsoft\Windows\Cur ...

  8. PHP实现发送模板消息（微信公众号版）

    以下为开发步骤: 1.微信公众号为服务号且开通微信认证(其他类型账号不能发送) 2.ip白名单设置你的服务器ip(用于获取access_token) 3.网页授权你的域名(用于获取用户的openid) ...

  9. NDK学习笔记-文件的拆分与合并

    文件的拆分与合并在开发中经常会用到,上传或是下载的时候都有这样的运用 文件拆分的思路 将文件大小拆分为n个文件 那么,每个文件的大小就是等大小的 如果文件大小被n除不尽,那么就使用n+1个文件来拆分 ...

  10. 最新 汇量科技java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 汇量科技等10家互联网公司的校招Offer,因为某些自身原因最终选择了 汇量科技.6.7月主要是做系统复习.项目复盘.Le ...