什么是Promise
Promise是异步编程的一种解决方案,它有三种状态,分别是pending-进行中、resolved-已完成、rejected-已失败
当Promise的状态又pending转变为resolved或rejected时,会执行相应的方法,并且状态一旦改变,就无法再次改变状态,这也是它名字promise-承诺的由来
直接上案例了,在案例中理解:
最简单的promise
new Promise(resolve =>{ setTimeout(()=>{ resolve(‘hello‘) },2000); }).then(value=>{ console.log(value + ‘world‘); })
分两次,顺序执行
console.log(‘start‘); new Promise(resolve => { setTimeout(() => { resolve(‘hello‘); }, 2000); }) .then(value => { console.log(value); return new Promise(resolve => { setTimeout(() => { resolve(‘world‘); }, 2000) }); }) .then(value => { console.log(value + ‘ world‘); }); // 结果 // start // hello (2s) // worldworld (4s)
假如一个promise已经完成,再.then()会怎样
console.log(‘start‘); let promise = new Promise(resolve=>{ setTimeout(()=>{ console.log(‘this promise fullfilled‘); resolve(‘hello,world‘) },2000); }); setTimeout(()=>{ promise.then(value=>{ console.log(value); }) },4000) // 结果 // start // this promise fullfilled (2s) // hello,world (4s) //在任何地方生成一个promise后,可以存为一个变量,不管该promise有完成,都会依次根据队列执行
假如在 .then() 的函数里面不返回新的 Promise, 会怎样?
console.log(‘start‘); new Promise(resolve => { setTimeout(() => { resolve(‘hello‘) }, 2000); }) .then(value => { console.log(value); (function () { return new Promise(resolve => { setTimeout(() => { console.log(‘第二个promise‘); resolve(‘Merry‘) }, 2000); }) }()); return false; }) .then(value => { console.log(value + ‘world‘); }) // 结果 // start // hello (2s) // falseworld (2s) // 第二个promise (4s) //.then() 的函数里面不返回新的 Promise,会默认执行下一个环节,即使你直接返回了false,也会执行 // 备注 // 匿名函数,(function(){})();立即执行,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环境,增加代码的兼容性。
.then()接受两个函数作为参数,分别代表fulfilled和rejected
.then()返回一个新的promise实例,所以它可以链式调用
状态相应函数可以返回新的promise或其他值,如果返回新的Promise,那么下一级.then()会在新的Promise状态改变后执行
!!如果返回其他任何值,则会立即执行下一级.then()
.then()里面有.then()的情况
会等里面的.then()执行完,再执行外面的。最好不要这样写,依次展开效果一样
new Promise(resolve => { console.log(‘start‘); setTimeout(() => { console.log(‘1‘); resolve(‘1‘); }, 1000) }) .then(value => { return new Promise(resolve => { setTimeout(() => { console.log(‘1-1‘); resolve(‘1-1‘); }, 1000) }) .then(value => { console.log(‘1-2‘); return value; }) .then(value => { console.log(‘1-3‘); return value; }) }) .then(value => { console.log(‘2‘); }) /* 结果: start 1 1-1 1-2 1-3 2 */
错误处理两种做法:
Promise会自动捕获内部异常,并交给rejected响应函数处理
1.reject(‘错误信息‘).then(null,message=>{})
2.throw new Error(‘错误信息‘).catch(message=>{})
推荐时候用第二种,更加清晰,并且可以捕获前面的错误
console.log(‘go‘); new Promise((resolve,reject)=>{ setTimeout(()=>{ reject(‘bye‘) // throw new Error(‘bye‘); },1000) }) .then(value=>{ console.log(value+‘world‘); }) .catch(error=>{ console.log(‘error:‘,error); }) // go // error: bye
.catch() + .then()连用
.catch()也会返回一个promise实例
建议在所有队列后面都加上.catch()
console.log(‘go‘); new Promise(resolve=>{ setTimeout(() => { resolve(‘‘); }, 1000); }) .then(()=>{ console.log(‘start‘) throw new Error(‘test error‘); }) .catch((err)=>{ console.log(‘I catch:‘+ err); // 下面一行代码的注释讲引发不同的走向 throw new Error(‘another error‘); }) .then(()=>{ console.log(‘arrive here‘); }) .then(()=>{ console.log(‘and here‘); }) .catch((err)=>{ console.log(‘I catch:‘+ err); }) /* 结果一: go start I catch:Error: test error arrive here and here 结果二: go start I catch:Error: test error I catch:Error: another error */
Promise.all([p1,p2,p3,...]); 批量同时执行多个promise实例,包装成一个新的promise实例,返回的是所有promise结果组成的数组
console.log(‘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(() => { resolve(‘I`m P1‘); }, 1000); }); let p2 = new Promise(resolve=>{ setTimeout(() => { resolve(‘I`m P2‘); }, 3000); }); return Promise.all([p1,p2]); }) .then(all =>{ console.log(‘3:‘,all); let p1 = new Promise(resolve=>{ setTimeout(() => { resolve(‘I`m P1‘); }, 1000); }); let p2 = new Promise((resolve,reject)=>{ setTimeout(() => { reject(‘I`m P2‘); }, 1000); }); let p3 = new Promise((resolve,reject)=>{ setTimeout(() => { reject(‘I`m P3‘); }, 1500); }); return Promise.all([p1,p2,p3]); }) .then(all=>{ console.log(‘all:‘,all); }) .catch(err=>{ console.log(‘catch‘,err); }) /* 结果: go 1: [ 1, 2, 3 ] 2: [ [Function], ‘xxoo‘, false ] 3: [ ‘I`m P1‘, ‘I`m P2‘ ] catch I`m P2 */
原文地址:https://www.cnblogs.com/LChenglong/p/9478804.html