Promise,我们来实战
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,我们来实战的更多相关文章
- Java多线程编程模式实战指南之Promise模式
Promise模式简介(转) Promise模式是一种异步编程模式 .它使得我们可以先开始一个任务的执行,并得到一个用于获取该任务执行结果的凭据对象,而不必等待该任务执行完毕就可以继续执行其他操作.等 ...
- Promise实战AJAX封装
一.利用Promise的知识,对最开始的ajax的例子进行一个简单的封装: var url = 'xxx'; // 封装一个get请求的方法 function request(url){ return ...
- 【C++并发实战】(三) std::future和std::promise
std::future和std::promise std::future std::future期待一个返回,从一个异步调用的角度来说,future更像是执行函数的返回值,C++标准库使用std::f ...
- 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)
8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...
- 细嗅Promise
读完这篇文章,预计会消耗你 40 分钟的时间. Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来.需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是 ...
- 关于promise(一)
该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性. 由于ES6原生提供Promise,所以无需安装Promise库.但在ES5环境下我们可以使用bluebird库 ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 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 ...
- [Javascript] Promise
Promise 代表着一个异步操作,这个异步操作现在尚未完成,但在将来某刻会被完成. Promise 有三种状态 pending : 初始的状态,尚未知道结果 fulfilled : 代表操作成功 r ...
随机推荐
- Shiro 核心功能案例讲解 基于SpringBoot 有源码
Shiro 核心功能案例讲解 基于SpringBoot 有源码 从实战中学习Shiro的用法.本章使用SpringBoot快速搭建项目.整合SiteMesh框架布局页面.整合Shiro框架实现用身份认 ...
- CentOs 7 中安装tomcat8
1,下载tomcat8.0 进入tomcat的下载地址:http://tomcat.apache.org/download-80.cgi 2,上传到linux服务器 cd /usr/local/jav ...
- 测试同学难道要写一辈子的hello world?
最近我们在测试团队内推行自动化用例责任制,大致的意思是:我们安排培训资源,提供技术支持和一对一辅导,要求每一个自主选择了自动化和接口测试发展通道的同学必须让自己负责的项目自动化用例覆盖率有所提升. 后 ...
- mysql window版本下载
最小的版本:https://cdn.mysql.com//Downloads/MySQL-5.5/mysql-5.5.54-win32.msi
- 未找到与命令“dotnet-ef”匹配的可执行文件
在命令行里面执行操作的时候,报错了,网上找了一下原因 在报错的类库里面的xxx.csproj文件里面的ItemGroup里面加上一句 <DotNetCliToolReference Includ ...
- 剑指offer第八天
32.把数组排成最小的数 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323 ...
- SpringBoot+Mybatis+PageHelper简化分页实现
前言 经过一段时间的测试和修改PageHelper插件逐渐走到了让我觉得靠谱的时候,它功能的就是简化分页的实现,让分页不需要麻烦的多写很多重复的代码. 已经加入我的github模版中:https:// ...
- css线性渐变兼容
css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...
- Object方法
1. getClass() 返回此 Object 的运行时类. 2. hashCode() 返回该对象的哈希码值. 3. equals() 指示其他某个对象是否与此对象“相等”. 4. toStrin ...
- 转:客户端session与服务端session
会话(Session)跟踪是Web程序中常用的技术,用来 跟踪用户的整个会话 .常用的会话跟踪技术是Cookie与Session. Cookie通过在客户端记录信息确定用户身份 , Session通过 ...