Promise的基础我就不说了,我更加关心的是Promise能带给我什么便利?这也是本文的内容所在。

Promise.all

并发执行多个异步方法,统一返回结果,结果按照参数的顺序返回。

const getRandom = () => +(Math.random()*1000).toFixed(0);

const asyncTask = taskID => new Promise(resolve => {
let timeout = getRandom();
console.log(`taskID=${taskID} start.`);
setTimeout(function() {
console.log(`taskID=${taskID} finished in time=${timeout}.`);
resolve(taskID)
}, timeout);
}); Promise.all([asyncTask(1),asyncTask(2),asyncTask(3)])
.then(resultList => {
console.log('results:',resultList);
});

  上面的这个方法能够很好的看出Promise.all的执行方式,Promise.all的作用是显而易见的,比如我的页面上有多个请求,但是这些请求并没有任何联系,但是整个页面需要等这几个请求数据都获取到之后我们才能正确的展示页面,在之前一段时间里,我们可能会使用嵌套的方式去逐个请求,但考虑到这样会浪费时间,我们可能会优化自己的写法,通过计时器的方式去处理。其实计时器的原理跟Promise.all的实现的结果就差不多,而有了Promise.all之后就可以直接把几个异步的请求方法作为参数直接调用Promise.all了,so easy不是吗?

Promise.race

并发执行多个异步方法,返回最快的执行结果。

const getRandom = () => +(Math.random()*1000).toFixed(0);

const asyncTask = taskID => new Promise(resolve => {
let timeout = getRandom();
console.log(`taskID=${taskID} start.`);
setTimeout(function() {
console.log(`taskID=${taskID} finished in time=${timeout}.`);
resolve(taskID)
}, timeout);
}); Promise.race([asyncTask(1),asyncTask(2),asyncTask(3)])
.then(resultList => {
console.log('results:',resultList);
});

  同样的这个例子也能很好的说明race的作用,race的作用,为了保障能够获取到数据,我们通过多个不同的方法去获取数据,但其实这几个方法返回的数据是相同的,只要任何一个方法成功返回了,我们就可以获取到自己想要的数据了。

看了上面两个例子之后是不是对Promise的作用更加了解了,其实前端业务开发中只要有了多个异步方法就可以使用Promise了,这也是目前最优雅的编码方式。尽量去用就对了,没毛病。

上面两种方法是Promise自带的,但是实际情况中有很多情况下,多个请求之间是有依赖关系的,所以我新增waterfall方法

Promise.waterfall

多个函数依次执行,且前一个的输出为后一个的输入。

实现如下面:

Promise.waterfall = function(promises){
if (!Array.isArray(promises)) {
throw new TypeError('You must pass an array to all.');
}
// 返回一个promise 实例
return new Promise(function(resolve, reject){
var i = 0,
result = [],
len = promises.length,
count = len; // 每一个 promise 执行成功后,就会调用一次 resolve 函数
function resolver(index) {
return function(value) {
resolveWaterfall(index, value);
};
 } function rejecter(reason){
reject(reason);
} function resolveWaterfall(index, value) { if( index == len){
resolve(value)
} else {
promises[index](value).then(resolver(index + 1), rejecter);
}
} resolveWaterfall(0);
});
};

  同样的我们通过一段测试代码来看其执行结果

const getRandom = () => +(Math.random()*1000).toFixed(0);

const asyncTask = taskID => new Promise(resolve => {
taskID = taskID || 1;
let timeout = getRandom();
console.log(`taskID=${taskID} start.`);
setTimeout(function() {
console.log(`taskID=${taskID} finished in time=${timeout}.`);
resolve(taskID + 1)
}, timeout);
}); Promise.waterfall([asyncTask, asyncTask, asyncTask]).then(value => console.log(value))

  返回的结果是4,三个异步方法依次执行,并且把前一次的输出作为下一次的输入执行。

Promise,我们来实战的更多相关文章

  1. Java多线程编程模式实战指南之Promise模式

    Promise模式简介(转) Promise模式是一种异步编程模式 .它使得我们可以先开始一个任务的执行,并得到一个用于获取该任务执行结果的凭据对象,而不必等待该任务执行完毕就可以继续执行其他操作.等 ...

  2. Promise实战AJAX封装

    一.利用Promise的知识,对最开始的ajax的例子进行一个简单的封装: var url = 'xxx'; // 封装一个get请求的方法 function request(url){ return ...

  3. 【C++并发实战】(三) std::future和std::promise

    std::future和std::promise std::future std::future期待一个返回,从一个异步调用的角度来说,future更像是执行函数的返回值,C++标准库使用std::f ...

  4. 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)

    8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...

  5. 细嗅Promise

    读完这篇文章,预计会消耗你 40 分钟的时间. Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来.需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是 ...

  6. 关于promise(一)

    该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性. 由于ES6原生提供Promise,所以无需安装Promise库.但在ES5环境下我们可以使用bluebird库 ...

  7. 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)

    最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...

  8. Selenium2学习-007-WebUI自动化实战实例-005-解决 Firefox 版本不兼容:org.openqa.selenium.WebDriverException: Failed to connect to binary FirefoxBinary

    此文主要讲述 Java 运行 Selenium 脚本时,因 Friefox 浏览器版本与 selenium-server-standalone-x.xx.x.jar 不兼容引起的 org.openqa ...

  9. [Javascript] Promise

    Promise 代表着一个异步操作,这个异步操作现在尚未完成,但在将来某刻会被完成. Promise 有三种状态 pending : 初始的状态,尚未知道结果 fulfilled : 代表操作成功 r ...

随机推荐

  1. VSCode插件MSSQL教程(昨天提了一下)

    推荐一个跨平台SQL IDE:https://docs.microsoft.com/zh-cn/sql/sql-operations-studio/download 什么数据库都木有(系统自带的不算) ...

  2. Spring 依赖注入的理解

    首先: 1.依赖注入就是一种在一个需要使用它的类中定义一个接口,该类中不管这个接口是怎么实现的,只是执行这个方法 2.依赖注入可以让该类实现通用 代码: 1.定义一个饮料接口 package cn.l ...

  3. 机器学习之Adaboost (自适应增强)算法

    注:本篇博文是根据其他优秀博文编写的,我只是对其改变了知识的排序,另外代码是<机器学习实战>中的.转载请标明出处及参考资料. 1 Adaboost 算法实现过程 1.1 什么是 Adabo ...

  4. SharedPreferences封装类

    最近一直在读马伟奇老师的简书,给人以不一样的感觉,接下来的时间会做做笔记,毕竟好东西变成自己的才有用 原文地址SharedPreferencesUtils 依赖 dependencies { comp ...

  5. the c programing language 学习过程8

    glean 捡拾落穗; glean insight 深入了解 modeled模型化 peripheral外围的 himogeneous匀称的 intents 意图  excerpt摘录 intende ...

  6. Kotlin——基础的函数/方法详解

    对于Kotlin中的函数来说,和JavaScript或者Lua这些语言很像,它有着这些语言的特性.但是也与这些语言就着许多不同之处.或许你更了解Java语言,然而对于Java语言来说,它不是不是闭包这 ...

  7. Luogu P2419 [USACO08JAN]牛大赛Cow Contest

    题目背景 [Usaco2008 Jan] 题目描述 N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a p ...

  8. linux 运维,代理,acl控制访问

    运维概述:运行 & 维护,Operation & MaintanceIT运维.业务运维.日常管理运维采用相关的方法.手段.技术.制度.流程和文档等,对IT运行环境.IT业务系统和IT运 ...

  9. 放大倍数超5万倍的Memcached DDoS反射攻击,怎么破?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯游戏云 背景:Memcached攻击创造DDoS攻击流量纪录 近日,利用Memcached服务器实施反射DDoS攻击的事件呈大幅上 ...

  10. win10系统搭建虚拟机:VMware Workstation Player 12环境+Ubuntu Kylin 16.04 LTS系统

    笔者小白一枚,其实连虚拟机是个啥都不知道...实属惭愧,介于此所以今天倒腾了一下花了一上午就已经搭建好一个VMware Workstation Player 12免费版的,很哈皮,于是赶紧分享一下. ...