promise对象里resolve和reject状态讲解及Promise.all()的使用
首先来说下同步异步与阻塞非阻塞的概念,同步异步与阻塞非阻塞并没有关系。同步异步主要是事情做完以后,如何进行处理、或者说关注的是一种消息通信机制。
同步的情况下,是由处理消息者自己去等待消息是否被触发;
而异步的情况下是由触发机制来通知处理消息者
举例:
所以同步异步可以说是对被请求方来说的,被请求者使用什么方式来告知处理结果
- 思考,思考。。。。。。。,好了,有答案了,当场告诉你 -------- 同步
- 这个问题需要一点时间,你先做点别的,等我想好了,去找你。 --------异步
阻塞非阻塞,主要是对于请求者而言的
- 阻塞:发出请求等待结果返回,然后再处理后续的事情
- 非阻塞:发出请求不等待结果返回,可以接着做后续的事情
上代码:
/**当我们new Promise会得到一个Promise对象,该对象会有一个任务要完成,同时该对象会维护一个状态
PromiseStatus
1:pending:正在处理
2:resolved:已完成
3:rejected:失败*/
let p1 = new Promise(function(resolve,reject){
/**要做的事情通过一个函数来完成,该函数会接收两个值
resolve
reject
这两个参数都是一个函数,当我们调用他们的时候,会改变当前任务的状态
resolve() => resolved
reject() => rejected */
setTimeout(() => {
var a = Math.random();
if(a < 0.5){
console.log(a,'p1失败')
reject(a)
}else{
console.log(a,'p1成功')
resolve(a)
}
},1000)
})
/**Promise对象还有一个then方法,当前任务成功的时候,会调用该方法,并执行该方法传入函数参数
then方法接收两个参数,它们都是函数
第一个参数是当前状态为resolved时候执行
第二个参数是当前状态为rejected时候执行*/
p1.then(a => {
console.log('成功',a)
},a => {
console.log('失败',a)
})
/**虽然then方法中的参数接收两个
一个是成功的callback
一个是失败的callback
但是,在书写的时候,如果每一个then都传这两个callback的话,编写过程太麻烦,为了能够统一的处理失败Pormise对象又提供了一个新的方法:catch,catch方法也接收一个callback
只要有一个Promise的状态变成了rejected,那么就会被catch方法捕获,执行catch的callback*/
.then((a) => {
return new Promise((resolve,reject) => {
setTimeout(() => {
a *= a;
console.log(a,'p1成功')
reject(a);
},1000)
})
}).then((a) => {
console.log(a,'p1的then里成功')
}).catch((a) => {
console.log(a,'失败捕获')
})
看打印出来的结果:
当p1中的随机数a < 0.5时,就直接进入catch里捕获到失败了,后面的then都不会执行

当p1中的随机数a > 0.5时,就进入到第一个then里,第一个then里又有一个promise对象,但是执行的是reject函数,所以就会直接到catch里捕获到失败

情形:在一个Promise任务中需要处理多个异步任务,这多个的异步任务是同时进行的,但是执行时间是不确定的,后续的任务需要这几个异步任务全部完成之后在执行,这时候就需要用到Promise里面提供的all方法来实现
var p1 = new Promise((resolve,reject) => {
let a = 1;
setTimeout(() => {
a++;
resolve(a);
},Math.random() * 1000)
})
var p2 = new Promise((resolve,reject) => {
let b = 2;
setTimeout(() => {
b++;
resolve(b);
},Math.random() * 1000)
})
/**把两个不同的异步任务分别包装在一个Promise对象里,然后调用Promise对象静态方法all,把上面多个不同异步Promise作为数组传递给all方法的参数,当多个异步任务的状态都变成resolve,那么all的状态才是resolved,但是只要有一个异步任务的状态变成了rejected,那么all的状态就会变成rejected*/
Promise.all([p1,p2]).then(([a,b]) => {
console.log(a,b)
}).catch((err) => {
console.log(err)
})
打印台:

over~
promise对象里resolve和reject状态讲解及Promise.all()的使用的更多相关文章
- 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
- Promise对象的resolve回调函数和reject回调函数使用
Promise是ES6中用来结局回调地狱的问题的但是并不能帮我们减少代码量 Promise是一个构造函数 new Promise() 得到一个Promise一个实例 在Promise上有两个函数分别是 ...
- JavaScript异步与Promise基本用法(resolve与reject)
Promise解决的问题相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成了 ...
- resolve和reject不会终结Promise的参数函数的执行
- 16. Promise对象
目录 Promise对象 一.含义 1. Promise是什么 2. 实例讨论 二.Promise特性案例解析 1. Promise的立即执行性 2. promise的三种状态 3. Promise的 ...
- 谈谈 ES6 的 Promise 对象
https://segmentfault.com/a/1190000002928371 前言 开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作.一般 ...
- Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...
- JavaScript异步编程(1)- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- 通过一道笔试题浅谈javascript中的promise对象
因为前几天做了一个promise对象捕获错误的面试题目,所以这几天又重温了一下promise对象.现在借这道题来分享下一些很基础的知识点. 下面是一个面试题目,三个promise对象捕获错误的例子,返 ...
随机推荐
- 手机app抓包[小米]
方案一:(手机电脑在同一wifi下) 打开burp设置代理 这里的ip为电脑的ip 手机手动设置代理为电脑的ip+8080 导入证书 电脑上下载下证书(http://burp) 传到手机上
- JS面向对象编程之封装
来源:https://segmentfault.com/a/1190000015843072 我们所熟知的面向对象语言如 C++.Java 都有类的的概念,类是实例的类型模板,比如Student表示学 ...
- mysql 复制表结构和数据
CREATE TABLE 新表名 SELECT 字段 as 新字段,字段 as 新字段.....from 旧表名:
- JS编程建议——11:慎重使用伪数组
建议11:慎重使用伪数组JavaScript没有真正的数组,因此typeof运算符不能辨别数组和对象.伪数组在JavaScript中有很高的易用性,程序员不用给它设置维度,而且永远不用担心产生越界错误 ...
- 数学--数论--HDU--5878 Count Two Three 2016 ACM/ICPC Asia Regional Qingdao Online 1001
I will show you the most popular board game in the Shanghai Ingress Resistance Team. It all started ...
- Appium-desktop 元素定位
1.打开 appium-desktop ,点击 start session 2.打开后,点击屏幕右上角的搜索按钮 3.然后会打开配置页面,在本地服务配置信息同上面写的代码链接配置.填入正确的信息后,点 ...
- python(索引/切片)
一.索引 1.索引值从左到右-->从0开始,索引值从右到左-->从-1开始 取值格式var[index] >>> name = "xinfangshuo&quo ...
- 2-MyBatisPlus教程(HelloWorld)
1,准备数据 DROP TABLE IF EXISTS user; CREATE TABLE user ( id ) NOT NULL COMMENT '主键ID', name ) NULL DEFA ...
- CSS的基本语法及页面引用
CSS的基本语法及页面引用 CSS基本语法 CSS的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个 ...
- JAVA基础篇 之 方法的重载
任何程序语言都具备了一项重要的特性就是对名字的运用.当创建一个对象时,也就给此对象分配到的存储空间取了一个名字.所谓方法则是给某个动作取的名字.通过使用名字你可以引用所有的对象和方法. 将人类 ...