promise执行顺序总结

面试遇到的promise的执行顺序问题，在这里，总结下。之前博客的账号忘记了，新建了一个。

1、   const promise = new Promise((resolve, reject)=>{console.log(1);resolve();console.log(2);})promise.then(()=>{console.log(4);})console.log(5);运行结果是： 1,2,5,4解释：promise的构造函数是同步执行，promise.then中的函数是异步执行。2、   const promise = new Promise((resolve, reject) => {resolve('success1')reject('error')resolve('success2')})promise.then((res) => {console.log('then: ', res)}).catch((err) => {console.log('catch: ', err)})运行结果：then: success1解释：构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何  作用。promise 状态一旦改变则不能再变。promise 有 3 种状 态： pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending-> rejected，状态一旦改变则不能再变。
3、const promise = new Promise((resolve, reject) => {setTimeout(() => {console.log('once')resolve('success')}, 1000)})const start = Date.now()promise.then((res) => {console.log(res, Date.now() - start)})promise.then((res) => {console.log(res, Date.now() - start)
})
运行结果：oncesuccess 1005success 1007
解释：promise 的 .then 或者 .catch 可以被调用多次，但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值。4、console.log('start');new Promise(function(resolve,reject){setTimeout(function(){    //定时器模拟异步resolve('hello');    //修改promise状态调用then中的第一个函数},2000);}).then((value)=>{console.log(value);    //接收resolve传来的值return new Promise(function(resolve){   //该then()返回一个新的promise实例，后面可以继续接thensetTimeout(function(){resolve('world');       //修改新promise的状态，去调用then},3000)})  }).then((value)=>{console.log(value);})
//输出结果：
/*立即输出   start两秒输出   hello再三秒     world*/

5、上面我们在 then() 函数中返回的是一个新的promise，如果返回的不是一个新的promise会怎样呢？依然是上面的代码，稍作修改。

 console.log('start');
new Promise(function(resolve,reject){setTimeout(function(){  resolve('hello');    },2000);
}).then((value)=>{console.log(value);  (function(){return new Promise(function(resolve){   setTimeout(function(){resolve('world');       },3000)})  })();  return false;
}).then((value)=>{console.log(value);
})
/*结果：立即输出   start两秒输出   hello三秒输出   false
*/根据上面的运行结果来看，如果在一个then（）中没有返回一个新的promise，则return 什么下一个then就接受什么，在上面的实例代码中return的是false，下一个then中接受到的value就是false，如果then中没有return，则默认return的是    undefined.

6、then（）中包含.then（）的嵌套情况
then()的嵌套会先将内部的then()执行完毕再继续执行外部的then();在多个then嵌套时建议将其展开，将then()放在同一级，这样代码更清晰。

 console.log('start');
new Promise((resolve,reject)=>{setTimeout(function(){console.log('step');resolve(110);},1000)
})
.then((value)=>{return new Promise((resolve,reject)=>{setTimeout(function(){console.log('step1');resolve(value);},1000)}).then((value)=>{console.log('step 1-1');return value;}).then((value)=>{console.log('step 1-2');return value;})
})
.then((value)=>{console.log(value);console.log('step 2');
})
/*startstepstep1step 1-1step 1-2110step 2
*///展开之后的代码
console.log('start');
new Promise((resolve,reject)=>{setTimeout(function(){console.log('step');resolve(110);},1000)
})
.then((value)=>{return new Promise((resolve,reject)=>{setTimeout(function(){console.log('step1');resolve(value);},1000)})
})
.then((value)=>{console.log('step 1-1');return value;})
.then((value)=>{console.log('step 1-2');return value;
})
.then((value)=>{console.log(value);console.log('step 2');
})

7、catch和then的连用
如果每一步都有可能出现错误，那么就可能出现catch后面接上then的情况。上代码

new Promise((resolve,reject)=>{resolve();
})
.then(value=>{console.log('done 1');throw new Error('done 1 error');
})
.catch(err=>{console.log('错误信息1：'+err);
})
.then(value=>{console.log('done 2');
})
.catch(err=>{console.log('错误信息2：'+err);
})
/*done 1错误信息1：Error: done 1 errordone 2说明catch后面会继续执行then，catch返回的也是一个promise实例
*/
new Promise((resolve,reject)=>{resolve();
})
.then(value=>{console.log('done 1');throw new Error('done 1 error');
})
.catch(err=>{console.log('错误信息1：'+err);throw new Error('catch error');
})
.then(value=>{console.log('done 2');
})
.catch(err=>{console.log('错误信息2：'+err);
})
/*done 1错误信息1：Error: done 1 error错误信息2：Error: catch error如果在catch中也抛出了错误，则后面的then的第一个函数不会执行，因为返回的promise状态已经为rejected了

8、Promise.all()
将多个Promise批量执行，所有的Promise都完毕之后返回一个新的Promise。

1、接收一个数组作为参数
2、数组中可以是Promise实例，也可以是别的值，只有Promise会等待状态的改变
3、所有子Promise完成，则该Promise完成，并且返回值是参数数组中所有Promise实
例的结果组成的数组
4、有任何一个Promise失败，则该Promise失败，返回值是第一个失败的Promise的结果
console.log('here we go');
Promise.all([1,2,3]).then(all=>{console.log('1: ' + all); return Promise.all([function(){console.log('ooxx');},'xxoo',false])}).then(all=>{console.log('2: ' + all);let p1 = new Promise(resolve=>{setTimeout(function(){resolve('I\'m p1');},1500)});let p2 = new Promise(resolve=>{setTimeout(function(){resolve('I\'m p2');},2000)});return Promise.all([p1,p2]);}).then(all=>{console.log('3: '+all);let p1 = new Promise((resolve,reject)=>{setTimeout(function(){resolve('P1');},1000)})let p2 = new Promise((resolve,reject)=>{setTimeout(function(){reject('P2');},3000)})let p3 = new Promise((resolve,reject)=>{setTimeout(function(){reject('P3');},2000)})return Promise.all([p1,p2,p3]);}).then(all=>{console.log('all: ' + all);}).catch(err=>{console.log('Catch:' + err);})/*here we go1: 1,2,32: function(){console.log('ooxx');},xxoo,false3: I'm p1,I'm p2    Catch:P3      证明了上面的四点。*/

9、Promise.race()
和Promise.all()差不多，区别就是传入的数组中有一个Promise完成了则整个Promise完成了。

 let p1 = new Promise(resolve=>{setTimeout(function(){resolve('p1');},10000);})let p2 = new Promise(resolve=>{setTimeout(function(){resolve('p2');},1000);})Promise.race([p1,p2]).then((value)=>{console.log(value);})/*p1     1s之后输出。。    等待十秒后代码才算执行完毕*/

本文摘自：
链接：https://juejin.im/post/5a04066351882517c416715d
https://blog.csdn.net/qq_42381297/article/details/82889564

promise执行顺序总结相关推荐

【异步系列二】Promise原理及执行顺序详解
前言 Promise 是 javascript 中非常重要的一环,熟悉它是必须的,而且在面试中也常常会问到相关面试题. 在了解 Promise 之前,需要了解什么是异步编程,可以参考我的一篇文章:Ja ...
8张图让你一步步看清 async/await 和 promise 的执行顺序
2019独角兽企业重金招聘Python工程师标准>>> **摘要:**面试必问原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序作者:ziwei3 ...
Promise和setTimeout执行顺序面试题
看到过下面这样一道题: (function test() {setTimeout(function() {console.log(4)}, 0);new Promise(function execut ...
详解promise、async和await的执行顺序
说明: 本文摘自详解 promise.async和await的执行顺序. 1.题目和答案一道题题目:下面这段promise.async和await代码,请问控制台打印的顺序? async func ...
JS 中关于Promise的用法，状态，执行顺序详解，面试可用（原创）
前言在实际项目中我们常会去用已经封装好的promise如axios,或者也会自己去封装promise,甚至在面试中,关于promise的面试题也层出不穷,promise的重要性不言而喻,故写该文章记 ...
Promise.all执行顺序
Promise.all执行顺序理解栗子理解 Promise.all等待所有Promise执行完毕之后,按照放在all中的先后顺序将resolve()返回的数据放在Promise.all的reso ...
前端碎碎念之 nextTick, setTimeout 以及 setImmediate 三者的执行顺序
『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到. 我会查阅一些资料并可能加上自己的理解,来记录这些问题.更多文章请前往我的个人博客 ...
php 内部异步执行顺序,event_loop中不同异步操作的执行顺序
关于js的单线程.怎么创建一个异步任务都是老生常谈的话题了,我们今天就总结一下js不同的异步操作到底执行顺序如何. 首先我们要明白js两种任务类型,一个是macrotask(宏任务),一个是 micr ...
事件循环中的宏任务和微任务执行顺序
事件循环中的宏任务和微任务执行顺序先来了解一下事件循环.宏任务.微任务和Promise 1.事件循环(Event Loop)运行机制执行一个宏任务(栈中没有就从事件队列中获取) 执行过程中如果遇到 ...
js的事件循环机制，同步和异步，以及宏任务与微任务的执行顺序
前置知识点(重要): 1.什么是事件循环:js是单线程语言,同个时间执行一件事(同步),但是他可以有一个异步队列,遇到异步操作(比如说ajax这种阻塞时间很久的事情)把它们先放入异步队列,并且继续往下 ...

promise执行顺序总结

promise执行顺序总结相关推荐

最新文章

热门文章