首页 > 其他分享 >深入理解Promise

深入理解Promise

时间:2023-02-21 23:56:26浏览次数:47  
标签:el resolve console log 理解 深入 reject Promise

Promise的前提概念

Promise是一个构造函数,用来生成Promise实例
Promise构造函数接受一个函数作为参数,该函数有两个参数,分别是resolvereject
resolve:成功时的回调
reject:失败时的回调

Promise分别有三个状态
1、pending :进行中
2、fulfilled:已成功
3、rejected:已失败

Promise的执行
Promise一旦新建后就会立马执行,无法中途取消,Promise返回的只有两种状态,并且该状态产生就无法更改。也就是说Promise的状态只有以下两种情况:
1、从pendingfulfilled
2、从pendingrejected
pending的状态一旦改变,就不会再发生变化。

Promise的结果返回
Promise内部结果一旦返回,resolvereject其中的任何一种,即可产生回调。
1、resolve的回调在then()中获取(成功的回调)
2、reject的回调在cathc()中获取(失败,捕获错误)

let promise = new Promise(function(resolve,reject){
     // sth...
     let i = 5;
     if( i > 1){
         resolve(i) // 成功
     } else { 
         reject(error) // 失败
     }
})
    
promise.then(el=>{
     // el即为resolve的参数
     console.log(el);  // 5
    })
    .catch(err=>{
        console.log(err);
    })

Promise的执行顺序
Promise创建后会立马执行,then()是一个异步回调,将在所有的同步任务执行完后执行then(),也就是说:Promise在新建的时候会立即执行,then()catch()为异步任务,当所有同步任务执行完后才会执行then()

let pro = new Promise(function(resolve,reject){
    console.log('Promise新建');
    resolve()
})

pro.then(el=>{
   console.log('.then回调');
})
console.log('同步任务');

在这里插入图片描述
上述代码的执行结果:
1、Promise新建
2、同步任务
3、then()回调


Promise参数和执行顺序

resolve函数的参数出了可以携带正常值以外,还可以携带Promise实例

let pro = new Promise(function(resolve,reject){
let i = 10
    if(i < 50){
        resolve(i)
    } else {
        reject(error)
   }
})

let pro2 = new Promise(function(resolve,reject){
    resolve(pro)  // 参数为上一个Promise实例
})
      
pro2.then(el=>{
     console.log(el);  // 10
    })
    .catch(err=>{
     console.log(err);
    })

执行顺序:
先执行pro,如果pro的状态是pending时,pro2则会等待执行,当pro的状态变成resolverejected时,pro2则会立马执行,由于pro决定pro2的状态,所以后面的then变成了针对pro


Promise的嵌套执行

let p = new Promise((resolve,reject)=>{
     let i = 10
     if(i > 5){
         resolve(i)
     } else {
         reject('pro错误')
     }
})

let p2 = new Promise((resolve,reject)=>{
    p.then(el=>{
        console.log(el * 2);  // 20
        if(el > 6){
        // 此处需要写成return resolve(el)看起来会更正常
           resolve(el)
           console.log('我是p1的.then回调');  // 我是p1的.then回调
        } else {
            reject('pro2错误')
        }
    })
   })
   
let p3 = new Promise((resolve,reject)=>{
    p2.then(el=>{
        if(el > 50){
            resolve(el)
        } else {
            reject('pro3错误')
        }
    })
})

多个Promise的执行顺序:
新建Promise后会立马执行,先执行Promise内的任务,执行完成后再执行then()
如果Promise内有其它Promisethen()任务执行(这里简称p2),会先将p2then()任务执行完毕,再执行自身的then()任务
多个Promise并行,会先按顺序执行Promise的任务,再分别按照顺序分别执行他们的then()任务

需要注意的是:上面p2Promse中,正常来说,resolvereject执行完后,Promise的使命应该完成,但此处因为执行顺序的问题,并没有先执行resolve,而是执行了console的任务,因该写成return resolve(value)的形式,让Promise更正常一些,否则会出现不必要的意外。


Promise.prototype.then()

then方法是定义在原型对象Promise.prototype上的,它可以为Promise实例添加状态改变时的回调函数。
then有两个参数(可选):
resolved:成功状态的回调函数
rejected:失败状态的回调函数
then返回的是一个新的Promise实例,因此可以采用链式写法,then()后面还可以接then()

let p = new Promise((resolve,reject)=>{
    let i = 5;
    if(i > 4){
        resolve(i)
    } 
})

p.then(el=>{
    console.log('then1:'+ el);
    if(el > 3){
       return el
    }
}).then(el=>{
    console.log('then2:'+ el * 2);
}).catch(err=>{
    console.log(err);
}
 /*
   输出结果:
   then1:5
   then2:10
*/

上面代码使用then方法,第一个then()回调函数执行完后,会将返回结果传入第二个回调函数,也就是说,第二个then()的参数是第一个then()返回的结果。
catch的捕获具有冒泡性质,也就是说,前面不论.then了多少次,里面发生的错误,都会被最后一个catch捕获到。


Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null,rejection)的别名,也就是说,catch其实是用来指定发生错误时的回调函数。

let p = new Promise((resolve,reject)=>{
        reject('错误信息')
   })
   
p.then(el=>{
    // sth...
  }).catch(err=>{
    console.log(err);  // 错误信息
  })

上述代码中,p方法返回Promise对象,该对象返回的是rejectthen()方法调用回调函数,then()有两个参数,一个resolvedrejected,如果Promise返回的是reject,那么.then的状态就会变成rejectedrejected会调用catch()方法指定的回调函数,处理该错误,catch的参数就是reject抛出的错误信息。

如果then运行中抛出错误,也会被catch()捕获

let p2 = new Promise((resolve,reject)=>{
    resolve(100)
   })
p2.then(el=>{
    throw new Error('then抛错')
}).catch(err=>{
    console.log(err);  // Error: then抛错
})

catch捕捉错误的方式

   // 方式一
let promise = new Promise(function(resolve,reject){
    try {
       throw new Error('方式一错误')
    } catch(e){
         reject(e)
    }
})

promise.catch(err=>{
   console.log(err);  //  方式一错误
   })
// 方式二
let promise2 = new Promise(function(resolve,reject){
    reject(new Error('方式二错误'))
})

promise2.catch(err=>{
      console.log(err);  //  方式二错误
   })
// 方式三
let promise3 = new Promise((resolve,reject)=>{
      reject('方式三错误')
   })
   
promise3.catch(err=>{
      console.log(err);  // 方式三错误
   })

以上三种效果是一样的,前两种通过Error抛出异常,后一种直接抛出异常
catch返回的也是一个Promise对象,后面还可以接着调用then()方法
如果Promise的状态变成resolved,那么再抛出错误是无效的,因为Promise的状态一旦发生改变,就会永久保持该状态。

执行阻塞问题
Promise内部错误不会影响到到异步队列中的Promise外部代码,同步代码还是会造成阻塞

let p3 = new Promise((resolve,reject)=>{
      resolve(str)  // ReferenceError: str is not defined
})

p3.then(el=>{console.log(el)})
setTimeout(()=>{console.log('Promise外部代码')},1000)  // Promise外部代码
console.log('同步代码');  // 未打印

在这里插入图片描述
Promise在建立时会立即执行,此处报错了,所以后面的同步代码都无法执行,但是异步的setTimeout还是会执行,并不受影响。


finally()

finally有最后、终于的意思,也就是说finally()方法不管Promise最后的状态如何,都会执行

let p = new Promise((resolve,reject)=>{
            resolve('东方不败')
})
p.then(el=>{
    console.log(el);  // 东方不败
})
.catch(err=>{
    console.log(err);
})
.finally(()=>
    console.log('finally执行')  // finally执行
)

在这里插入图片描述
上述代码中,不管Promise最后的状态怎么样,finally都会执行,即使没有then()catch()finally也会执行

需要注意的是,finally不接受任何参数,但是finally的执行顺序跟内部是否是一个函数有关,如果finally内部是一个函数,那么finally会在Promise最后执行,如果finally内部没有任何函数,直接输出,那么finally会在Promise最前面执行。

finally的执行跟Promise的状态无关。


Promise.all()

Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例
语法:let p = Promise.all([p1,p2,p3])

let p = new Promise((resolve,reject)=>{
    resolve(10)
})
p.then(el=>{
    console.log(el);
})
        
let p2 = new Promise((resolve,reject)=>{
    // resolve(20)
    reject(20)
})
p2.then(el=>{
    console.log(el);
})
.catch(err=>{console.log('p2:',err);})

// p、p2都返回resolve则触发该函数
Promise.all([p,p2])
       .then(el=>{
           console.log(el);
        })
        .catch(err=>{console.log('all:',err);})  // all:20

Promise.all的两个promise参数状态都变成fulfilled时,才会触发Promise.all()的方法,如果其中以一个参数被rejected,那么Promise.all()也会变成rejected的状态,会被catch捕捉。
上面代码中,如果p2没有chach方法,则会调用Promise.all()catch


race()

Promise.race()方法可以将多个Promise实例包装成一个新的Promise实例。
语法: let p = Promise.race([p1,p2,p3])

let p = new Promise((resolve,reject)=>{
      setTimeout(()=>{
            resolve('p1状态')
      },2000)
    })
    
let p2 = new Promise((resolve,reject)=>{
      setTimeout(()=>{
            resolve('p2状态')
       },1000)
     })
     
let p3 = new Promise((resolve,reject)=>{
       setTimeout(()=>{
            resolve('p3状态')
       },3000)
     })
     
let p4 = new Promise((resolve,reject)=>{
       setTimeout(()=>{
            reject('reject:p4状态')
        },4000)
      })

let promise = Promise.race([p,p2,p3,p4])
promise
.then(el=>{
    console.log(el);  // p2状态
})
.catch(err=>{
    console.log(err);
})

在这里插入图片描述

race有竞争,角逐的意思,该方法其实就是参数中,哪一个Promise的状态先发生改变,就调用先发生改变的promise,这个el就是最先发生改变的promise的返回值。


Promise.allSettled()

Promise.allSettled()方法可以在所有异步操作都结束的情况下,调用该方法。它与Promise.all()方法不同的是,all()方法需要所有异步都成功才会进入then(),而allSettled()不需要。

let p = new Promise((resolve,reject)=>{
      resolve('p1状态')
})
        
let p2 = new Promise((resolve,reject)=>{
       setTimeout(()=>{
         reject('p2状态')
       },3000)
})

Promise.allSettled([p,p2])
.then(el=> console.log(el) )

在这里插入图片描述
Promise.allSettled()的参数不管是reject还是resolve都会触发,只要参数的状态全都发生改变即可,上面代码中,p2延迟了3s状态才发生改变,那么Promise.allSettled()则会等待参数的状态全都发生改变时触发。


Promise.any()

Promise.any()方法接受一组Promise实例作为参数,包装成一个新的Promise实例返回。

let p = new Promise((resolve,reject)=>{
      resolve('p1状态')
})
        
let p2 = new Promise((resolve,reject)=>{
      reject('p2状态')
})

Promise.any([p,p2])
       .then(el=>{
          console.log('then:',el);  // then: p1状态
       })
       .catch(err=>{
          console.log('catch:',err);
       })

只要有一个参数的状态变成fulfilledPromise.any就会变成fulfilled状态
如果所有的参数实例都变成rejected状态,包装实例才会变成rejected状态
也就是说,any是只要有一个参数成功,any就可以then,所有参数都rejectany才会catch


Promise.resolve()

Promise.resolve()可以将现有对象转为Promise对象,Promise.resolve()方法就起到这个作用。
语法:let p = Promise.resolve(obj)

let p = Promise.resolve('obj')
p.then(el=> console.log(el))  // obj

// 其实相当于
let p2 = new Promise(resolve=>resolve('obj'))

如果Promise.resolve()没有参数,那么将直接返回resolved状态的Promise对象,并且是一个没有参数的then()方法。

let p3 = Promise.resolve()
p3.then(el=>{
     console.log(el);  // undefined
})


setTimeout(()=>{
     console.log('定时器');
},0)

Promise.resolve()
       .then(()=>{
         setTimeout(()=>{console.log('resolve内定时器')},0)
         console.log('resolve内部');
        })
console.log('外部');

在这里插入图片描述
Promise的执行顺序,Promise是一个异步的微任务,同步任务执行完后才会执行异步任务,异步的微任务会先执行,微任务执行完后才会执行异步的宏任务,此处的setTimeout是异步的宏任务,所以会最后执行,外部的定时器是异步的宏任务,Promise内部的定时器是异步微任务内的宏任务,所以微任务内的宏任务会更慢执行,此处的执行顺序为:外部、resolve内部、定时器、resolve内定时器。


Promise.reject()

Promise.reject()返回一个新的Promise实例,该实例的状态为rejected

let p = Promise.reject('错误信息')
p.catch(err=>console.log(err))

// 等同于
let p2 = new Promise((resolve,reject)=>{
    reject('错误信息2')
})
p2.catch(err=>console.log(err))

在这里插入图片描述


Promise.try()

实际开发中,会遇到这么一种情况,不管函数是同步还是异步的,都想用Promise来处理它,因为这样就可以用then()指定下一步流程,catch处理抛出的错误,更便于管理流程。
基于Promise我们可以用async做到同步的代码风格执行异步操作,现在有一个最新的提案,使用Promise.try()来捕获所有的同步和异步错误。
为什么这么做?
Promise抛出的错误,catch可以捕获到,但此处仅限于当前Promise的异常错误,也就是异步的。如果同步错误抛出,那么catch()是捕捉不到的,需要在外层再嵌套一层try...catch,这样写起来非常麻烦,代码如下:

try {
   let p = new Promise((resolve,reject)=>{
           reject('异步错误')
       })
   p.catch(err=> void console.log(err) )  // 异步错误
   throw Error('同步错误')
      
} catch (e) {
    console.log(e);  // 同步错误
}
// 这样catch两次,可以处理同步和异步的抛错问题

如果使用Promise.try()就可以捕获所有的同步和异步错误

Promise.try(()=>{
    let p2 = new Promise((resolve,reject)=>{
        reject('异步错误2')
    })    
         throw Error('同步错误2')
    })
    .then(el=>{
        console.log('then:',el);
     })
    .catch(err=>{
        console.log('catch:',err);
    })

此处的Promise.try就相当于try代码块,Promise.catch就相当于catch代码块。


案例源码:https://gitee.com/wang_fan_w/es6-science-institute

如果觉得这篇文章对你有帮助,欢迎点亮一下star哟

标签:el,resolve,console,log,理解,深入,reject,Promise
From: https://www.cnblogs.com/wang-fan-w/p/17142945.html

相关文章

  • 理解树状数组这一篇文章就够啦
    树状数组TODO:二维树状数组维护不可差分信息补充题目前言在阅读本文之前,您可能需要先了解位运算、二叉树以及前缀和与差分等相关知识本文中,若无特殊说明,数列下......
  • 守护安全|AIRIOT城市天然气综合管理解决方案
     城市使用天然气存在安全风险和隐患,天然气管理的复杂性也比较高,依靠传统人工难以发现安全漏洞,特别是在燃气场站、管网的安全监管等方面,场站面临作业管理、区......
  • 快速理解5G CPE
    一、什么是5GCPE?CPE即客户前置设备,是CustomerPremiseEquipment的缩写,正如名字所述,它是在用户的终端设备之前的设备。传统的CPE是对WiFi信号进行二次中继、延长覆盖范......
  • 深入理解JavaScript对象
    前言在JavaScript中,对象是一种非常常见的数据类型,几乎每个程序员都会在日常工作中频繁地使用对象。在本篇文章中,我们将深入了解JavaScript对象的一些基本概念和一些高......
  • 关于Java锁机制的理解
    首先Java中为什么会使用锁:是为了解决Java共享内存模型带来的线程安全问题。思考:两个线程都有初始值为0的静态变量做自增,一个做自减,各做5000次,counter的值会为0嘛?public......
  • 简单理解js之ActiveX控件 new ActiveXObject
    ActiveX控件切记:ActiveX是微软的东西,故只有IE才支持!ActiveX控件,它一些可重用的软件组件或对象,通过使用ActiveX控件,可以很快地在网址、台式应用程序、以及开发工具中加入......
  • Nginx Location 深入剖析及动静分离简易配置
    本文为博主原创,未经允许不得转载:1. location 使用分析location是Nginx配置中的一个指令,用于访问的URL匹配,而在这个location中所配置的每个指令将会启动不......
  • Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
    转载请注明出处:1.Promise的then方法使用then方法是 Promise中处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他返回......
  • python * 和 ** 的理解
    数学计算、获取参数、通配符数学计算乘法计算a*b立方计算a**b获取参数表示函数的可变参数例如func(*agr)实际调用可以在函数写入多个参数*func(a,b......
  • 组件通信深入
    1.组件通信自定义事件深入父组件给子组件绑定原生DOM事件<template><div><!--此处的Son为组件Father的子组件--><Son@click="Dome"></Son> ......