Promise与它的四个小伙伴resolve、reject、all、race

要搞清楚执行顺序首先记住一句话：同步 => 异步 => 回调Promise 的结构

在后台打印一下console.dir(Promise)

Promise其实是一个构造函数，它有resolve，reject，race等静态方法;

Promise的原型（prototype）上有catch，then，finally方法；

Promise 与resolve

reslove之后，promise函数一旦有了结果（比如执行了then方法）就会开启一个微任务执行回调函数，微任务的优先级是很高的；

那么Promise将执行reslove（成功）状态后的函数

1. let p = new Promise(function(reslove,reject){
   
2.     reslove('成功1')  //状态由等待变为成功，传的参数作为then函数中成功函数的实参
   
3. })
   
4. 
   
5. p.then((data)=>{
   
6.     console.log('成功2+'+data)
   
7. },(err)=>{
   
8.     console.log('失败2+'+err)
   
9. }).catch((e)=>{
   
10. console,log("失败3",e)
    
11. })

复制代码

reslove(‘成功1’)中的成功1 作为then中的结果data输出
结果（注意这里的结果是一行展示，不是换行）=>成功2+成功1Promise 与reject将示例1的resolve(“成功1”)改成reject(‘失败1’) ，
那么Promise将执行reject（失败）状态后的函数

1. let p = new Promise(function(reslove,reject){
   
2.     reject('失败1')  //状态变为失败，执行的err中的回调函数。
   
3. })
   
4. 
   
5. p.then((data)=>{
   
6.     console.log('成功2+'+data)
   
7. },(err)=>{
   
8.     console.log('失败2+'+err)
   
9. }).catch((e)=>{
   
10. console,log("失败3",e)
    
11. })

复制代码

结果=>失败2+失败1
Promise 与 setTimeout

1.         setTimeout(() => {
   
2.           console.log(0)
   
3.         })
   
4.         
   
5.         new Promise(resolve => {
   
6.           resolve(1)
   
7.           Promise.resolve().then(t => {
   
8.             console.log(2)
   
9.           })
   
10.           console.log(3)
    
11.         })
    
12.         .then(t => {
    
13.           console.log("成功+"t)
    
14.         })
    
15.         
    
16.         console.log(4)

复制代码

结果：

这是为什么呢？？？是不是一脸懵逼了，为什么2先执行？？？
为什么先输出3,然后4
这是因为执行顺序中：同步 => 异步 => 回调； console.log(3)和console.log(4)是同步
resolve是异步，这也解释了，为什么“成功”后面跟着1
setTimesout是回调，放最后，所以0在最后；
最后解释为什么2先打印
因为reslove后，promise函数一旦有了结果（比如执行了then方法）就会开启一个微任务执行回调函数，微任务的优先级是很高的；
resolve在没有结果的状态下是不会执行的；上述代码中，在执行 resolve(1)的时候并没有.then(t =>{console.log("成功+"t)})，所以不会立即立即打印，成功+1；
resolve(1)之后跟着一个嵌套的Promise.resolve().then(t => { console.log(2) })，并且，resolve紧挨着.then(t => { console.log(2) })，那么嵌套的Promise就有结果，先执行回调函数console.log(2)；所以先输出2；
Promise与all

1. function num(x){
   
2.     let p= new Promise((resolve,reject)=>{
   
3.         setTimeout(()=>{
   
4.             resolve(x,console.log(x))
   
5.         },5000)
   
6.     })
   
7.     return p
   
8. }
   
9. Promise.all([num(1), num(2), num(3)])
   
10.   .then(res => console.log(res))
    

复制代码

//简写为以下，不熟练的还是老实一点，没错就是本人

1. function num(x) {
   
2.     const p = new Promise(r => setTimeout(() => r(x,console.log(x)), 5000))
   
3.     return p
   
4. }
   
5. Promise.all([num(1), num(2), num(3)])
   
6.   .then(res => console.log(res))

复制代码

分析：
Promise.all([num(1),num(1),num(1)])主要用于并行执行（并行！！！同时执行，没有先后顺序）。比如加载多个静态文件，等全部加载完成之后再执行.then()中的语句，展示出来。
缺点：如果有一个图片请求异常，就gg，并不会调用Promise.all 的then里面的语句。
执行结果：
5秒之后下面的1,2,3是同时打印的，因为并行！！！

Promise与race（race：赛跑，不是米饭！！！）
是不是只有我一个人第一眼看到这个单词，脑子里浮现的是一碗米饭？

1. function num(x) {
   
2.     const p = new Promise(r => setTimeout(() => r(x,console.log(x)), 5000))
   
3.     return p
   
4. }
   
5. Promise.race([num(1), num(2), num(3)])
   
6.   .then(res => console.log('race:'res))

复制代码

分析：
只要有一个结果了，我就执行下一步。
怎么用呢，如果有一个图片请求超时了，race还是能继续执行。如果all()的话就会卡住。
执行顺序：

Promise与then 与catch

promise 只会执行一次，无论之后调用了多少次then()、catch()，为Promise只会执行一次。
换句话说：promise 内部状态一经改变，并且有了一个值，那么后续无论怎么调用then().catch(),Promise内部状态都不会改变。

1. const promise = new Promise((resolve, reject) => {
   
2.   setTimeout(() => {
   
3.     console.log('timer')
   
4.     resolve(Date(Date.now()))
   
5.   }, 1000)
   
6. })
   
7. const start = Date.now();
   
8. promise.then(res => {
   
9.   console.log(res)
   
10. })
    
11. promise.then(res => {
    
12.   console.log(res)
    
13. })
    

复制代码

分析
promise.then运行Promise，虽然promise.then虽然是异步，但是Promise里面没有更新状态所以先不会执行。所以Promise里面的setTimeout先执行，一秒后先打印timer。
resolve(Date.now()之后，因为Promise只会执行一次。所以Date(Date.now())永远都是第一次执行promise.then()返回的resolve值Tue Jun 09 2020 14:18:21 GMT+0800 (中国标准时间)。
第二次执行promise.then，res值还是Tue Jun 09 2020 14:18:21 GMT+0800 (中国标准时间)
执行结果：

Promise与return

Promise函数中then()或者catch()中return一个非Promise的值都会包裹成Promise本身。扩展一下，如果在then或者catch中return Promise函数本身就会造成死循环

1. new Promise((resolve,reject)=>{
   
2.         resolve('success')
   
3. }).then(res=>{
   
4.         console.log('res1',res)
   
5. }).then(res=>{
   
6.         return 1
   
7. }).then(res=>{
   
8.         console.log('res2',res)
   
9. })

复制代码

分析：
第一个then()，console.log(‘res1’,res)正常执行，res1 success
第二个then()，return了非Promise值1，那么return 1会被包裹成 Promise.resolve(‘1’)，所以res值改变为1
第二个then()，执行console.log(‘res2’,res)，打印res 2
执行结果：

死循环写法：

1. const promise = Promise.resolve().then(() => {
   
2.   return promise;
   
3. })
   
4. promise.catch(console.err)

复制代码

Promise与值透传

这个世界真的是太复杂了！！！
学吧！！！
Promise的then()或者catch()中的参数只能是函数()=>{}，多层then()catch()叠加，如果不是函数的话，往上层找then中返回函数的，直到找到返回函数的为止。返回Promise中resolve或者reject的值。

1. Promise.resolve(1)
   
2. .then(()=>{return 2})
   
3. .then(()=>{return Promise.resolve(3)})
   
4. .then(console.log)

复制代码

执行结果： 3

1. Promise.resolve(1)
   
2. .then(()=>{return 2})
   
3. .then(Promise.resolve(3))
   
4. .then(console.log)

复制代码

执行结果： 2

1. Promise.resolve(1)
   
2. .then(2)
   
3. .then(Promise.resolve(3))
   
4. .then(console.log)

复制代码

执行结果： 1

--声明--

1、会员在访问网站并且下载文档提示缺少学费请每天签到或者分享资源即可拥有学费。

2、付出是相互的，请不要想不劳而获的好事能在你身边发生，社会是公平的。

3、转载或引用本网站内容须注明原网址，并标明本网站网址(http://www.aurrel.com)。

4、转载或引用本网站中的署名文章，请按规定向原作者支付稿酬。

5、网站发布的部分源码或者教程仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件（215586711@qq.com）与我们联系处理。

本文地址: https://www.aurrel.com/thread-17321-1-1.html