关于Promise.all()的理解
本篇笔记是抄的别人的,目的只是为了日后有用到时有个参考,原文地址是https://www.jianshu.com/p/7e60fc1be1b2
一、Pomise.all的使用
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
具体代码如下:
let p1 = new Promise((resolve, reject) => {resolve('成功了') })let p2 = new Promise((resolve, reject) => {resolve('success') })let p3 = Promse.reject('失败')Promise.all([p1, p2]).then((result) => {console.log(result) //['成功了', 'success'] }).catch((error) => {console.log(error) })Promise.all([p1,p3,p2]).then((result) => {console.log(result) }).catch((error) => {console.log(error) // 失败了,打出 '失败' })
Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。
代码模拟:
let wake = (time) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(`${time / 1000}秒后醒来`)}, time)}) }let p1 = wake(3000) let p2 = wake(2000)Promise.all([p1, p2]).then((result) => {console.log(result) // [ '3秒后醒来', '2秒后醒来' ] }).catch((error) => {console.log(error) })
二、Promise.race的使用
顾名思义,Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('success')},1000) })let p2 = new Promise((resolve, reject) => {setTimeout(() => {reject('failed')}, 500) })Promise.race([p1, p2]).then((result) => {console.log(result) }).catch((error) => {console.log(error) // 打开的是 'failed' })
原理是挺简单的,但是在正常的项目用到的场景不多,一般前端的逻辑不会太复杂,有人性的后台一般会把接口设计的很便捷,即是为了体现自己的技术,也是为了防止前端同事的吐槽,当然关键还是为了体验,但是如果遇到个渣渣后台就不好说了,本人在写这边文章前一个月的时间就正好遇到了这么个给力的后台同事,今天正好有看了遍这个Promise,所以特别写下来以便以后参考
转载于:https://www.cnblogs.com/cscredis/p/10055377.html
关于Promise.all()的理解相关推荐
- 谈谈对于Promise简单的理解
在这里简单的说一下我对promise浅显的理解: promise是ES6提出的 称之为 "回调地狱的超级英雄" 什么是回调地狱呢? 这就是一个很典型的回调地狱 这样的代码 逻辑性比 ...
- 观察者模式 - dom事件 / 自定义事件 / Promise 我的理解
观察者模式(Observer) 又称作为发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者对象之间通讯和耦合的问题; 观察者模式例子 引用于<JavaScript设计模式> ...
- Promise用法及理解
一.Promise是什么 Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all.reject.resolve这几个方法,原型上有then.catch等方法. 1.Promis ...
- AngularJS $q 和 $q.all 单个数据源和多个数据源合并(promise的说明)
这篇文章讲的不错, angular $q 和 promise!! -------------------------------------------------------------- 通过调 ...
- JavaScript之Promise
看完下面文章,你将了解到: 1.什么是Promise? 2.Promise怎样使用以及使用的场景,解决了什么问题 3.ES7较ES6又增加了哪些支撑Promise的语法糖 复制代码 一.Promise ...
- 浅谈Promise对象在ReactNative中的使用
下面开始: 写在前面 假设现在一个日常开发会遇到这样一个需求:多个接口异步请求,第二个接口依赖于第一个 接口执行完毕之后才能利用数据进行一系列操作.一般会这样写: A.fetchData({url: ...
- 再谈 Promise
读完这篇文章,预计会消耗你 40 分钟的时间. Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来.需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是 ...
- 谈谈 ES6 的 Promise 对象
2019独角兽企业重金招聘Python工程师标准>>> 谈谈 ES6 的 Promise 对象 异步编程 promise es6 javascript 前言 开篇首先设想一个日常开发 ...
- 聊一聊promise的前世今生
promise的概念已经出现很久了,浏览器.nodejs都已经全部实现promise了.现在来聊,是不是有点过时了? 确实,如果不扯淡,这篇随笔根本不会有太多内容.所以,我就尽可能的,多扯一扯,聊一聊 ...
最新文章
- Linux 忘记root登录密码解决方法
- 有没有想过,手写一个连接池?
- swing java管理系统_Java swing实现酒店管理系统
- 1.24 Lambda表达式与匿名内部类的联系和区别
- 动态网站的技术路线_简单动态网站搭建
- Asp.net MVC 中Controller返回值类型ActionResult
- 29岁当教授,发表11篇Nature和Science,这位顶尖科学家正式全职回国
- 自己动手写Docker系列 -- 4.1使用busybox创建容器
- 中小卖家需要避开的三个坑
- Sql语句对数据库和表的简单操作
- NET 连接池救生员
- bzoj2525 1426
- 1024shop 各个微服务 UML时序图
- 全国各地城市FM调频电台频率列表(上海北京广州深圳长沙武汉重庆)
- 解决通过无线路由上网,但有些网站打不开的问题
- 凯悦酒店集团完成收购Apple Leisure Group;复星旅文在第四届进博会上完成近10项国际合作签约 | 全球旅报...
- 阴阳师服务器维护2月20,阴阳师2019年3月20日更新内容 阴阳师手游3月20日维护更新公告...
- 堆排序算法(java实现)
- MySQL(学习笔记)
- 编译单个java文件
热门文章
- 针对【H-2017年信息基础班(周一班)】某些同学恶意使用lyl洛谷的谴责
- 关于思考写程序的意义
- Michael-Scott非阻塞队列(lock-free)算法的C实现
- Validation of XML with XSD
- 使用jrtplib打包发送h264数据,关使用vlc|mplayer播放
- following symbols must have non local/private scope错误问题解决方法
- QT各版本的源码下载地址
- 【ASWL】之RAID配置实战
- 1687: 数组操作(非常规思维)
- 阿里云携手晞司盖工业,赋能设备制造商制造+服务转型升级