登录网站,浏览更多精彩内容
您需要 登录 才可以下载或查看,没有账号?加入我们
×
要搞清楚执行顺序首先记住一句话:同步 => 异步 => 回调Promise 的结构在后台打印一下console.dir(Promise)
Promise其实是一个构造函数,它有resolve,reject,race等静态方法; Promise的原型(prototype)上有catch,then,finally方法; Promise 与resolve reslove之后,promise函数一旦有了结果(比如执行了then方法)就会开启一个微任务执行回调函数,微任务的优先级是很高的; 那么Promise将执行reslove(成功)状态后的函数 - let p = new Promise(function(reslove,reject){
- reslove('成功1') //状态由等待变为成功,传的参数作为then函数中成功函数的实参
- })
- p.then((data)=>{
- console.log('成功2+'+data)
- },(err)=>{
- console.log('失败2+'+err)
- }).catch((e)=>{
- console,log("失败3",e)
- })
复制代码 reslove(‘成功1’)中的成功1 作为then中的结果data输出
结果(注意这里的结果是一行展示,不是换行)=>成功2+成功1Promise 与reject将示例1的resolve(“成功1”)改成reject(‘失败1’) ,
那么Promise将执行reject(失败)状态后的函数
- let p = new Promise(function(reslove,reject){
- reject('失败1') //状态变为失败,执行的err中的回调函数。
- })
- p.then((data)=>{
- console.log('成功2+'+data)
- },(err)=>{
- console.log('失败2+'+err)
- }).catch((e)=>{
- console,log("失败3",e)
- })
复制代码 结果=>失败2+失败1
Promise 与 setTimeout
- setTimeout(() => {
- console.log(0)
- })
-
- new Promise(resolve => {
- resolve(1)
- Promise.resolve().then(t => {
- console.log(2)
- })
- console.log(3)
- })
- .then(t => {
- console.log("成功+"t)
- })
-
- 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
- function num(x){
- let p= new Promise((resolve,reject)=>{
- setTimeout(()=>{
- resolve(x,console.log(x))
- },5000)
- })
- return p
- }
- Promise.all([num(1), num(2), num(3)])
- .then(res => console.log(res))
复制代码
//简写为以下,不熟练的还是老实一点,没错就是本人
- function num(x) {
- const p = new Promise(r => setTimeout(() => r(x,console.log(x)), 5000))
- return p
- }
- Promise.all([num(1), num(2), num(3)])
- .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:赛跑,不是米饭!!!)
是不是只有我一个人第一眼看到这个单词,脑子里浮现的是一碗米饭?
- function num(x) {
- const p = new Promise(r => setTimeout(() => r(x,console.log(x)), 5000))
- return p
- }
- Promise.race([num(1), num(2), num(3)])
- .then(res => console.log('race:'res))
复制代码 分析:
只要有一个结果了,我就执行下一步。
怎么用呢,如果有一个图片请求超时了,race还是能继续执行。如果all()的话就会卡住。
执行顺序:
Promise与then 与catch
promise 只会执行一次,无论之后调用了多少次then()、catch(),为Promise只会执行一次。
换句话说:promise 内部状态一经改变,并且有了一个值,那么后续无论怎么调用then().catch(),Promise内部状态都不会改变。 - const promise = new Promise((resolve, reject) => {
- setTimeout(() => {
- console.log('timer')
- resolve(Date(Date.now()))
- }, 1000)
- })
- const start = Date.now();
- promise.then(res => {
- console.log(res)
- })
- promise.then(res => {
- console.log(res)
- })
复制代码
分析
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函数本身就会造成死循环 - new Promise((resolve,reject)=>{
- resolve('success')
- }).then(res=>{
- console.log('res1',res)
- }).then(res=>{
- return 1
- }).then(res=>{
- console.log('res2',res)
- })
复制代码 分析:
第一个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
执行结果:
死循环写法:
- const promise = Promise.resolve().then(() => {
- return promise;
- })
- promise.catch(console.err)
复制代码 Promise与值透传
这个世界真的是太复杂了!!!
学吧!!!
Promise的then()或者catch()中的参数只能是函数()=>{},多层then()catch()叠加,如果不是函数的话,往上层找then中返回函数的,直到找到返回函数的为止。返回Promise中resolve或者reject的值。 - Promise.resolve(1)
- .then(()=>{return 2})
- .then(()=>{return Promise.resolve(3)})
- .then(console.log)
复制代码 执行结果: 3
- Promise.resolve(1)
- .then(()=>{return 2})
- .then(Promise.resolve(3))
- .then(console.log)
复制代码 执行结果: 2
- Promise.resolve(1)
- .then(2)
- .then(Promise.resolve(3))
- .then(console.log)
复制代码 执行结果: 1
|