什么是Promise？
Promise是es6新增的异步编程的一种解决方案，是es6的原生对象。
它有三种状态：
- pending 进行中
- resolved 已完成
- rejected 已失败
当Promise的状态由pending转变为resolved时，会执行相应的方法，并且状态一旦改变，就无法再次改变状态。
用法
- 用函数包装异步操作，返回Promise对象：
function run1(){
var p = new Promise((resolve,reject)=>{
//这里做一些异步操作
setTimeout(()=>{
console.log('第一个run');
resolve('第一个run已完成');//resolve代表异步操作执行成功后的回调函数
},10000)
});
return p;
}
function run2(){
var p = new Promise((resolve,reject)=>{
//这里做一些异步操作
setTimeout(()=>{
console.log('第二个run');
resolve('第二个run已完成');//resolve代表异步操作执行成功后的回调函数
},10000)
});
return p;
}
- 链式操作：
run1().then((data)=>{
//then中放的语句是等run执行完毕后才执行的
console.log(data);//这个data是resolve(xxx)中传入的xxx
return run2();//这里run2的返回值也是一个Promise对象，它的resolve会传给下一个then
}).then((data)=>{
console.log(data);
return "结束了";//也可以直接把数据传给下一个then
}).then((data)=>{
console.log(data);//接收到上一个then return的数据
})
- reject怎么用？
resolve是已完成后的回调函数，reject是已失败后的回调函数。
reject就是把Promise的状态置为rejected，然后在then中捕捉到，或者用catch捕捉，执行“失败”的回调。
把代码改为：
function run1(a){
var p = new Promise((resolve,reject)=>{
//这里做一些异步操作
setTimeout(()=>{
console.log('第一个run');
if(a === 'reject'){
reject('第一个run已失败');//reject代表异步操作执行失败后的回调函数
}else{
resolve('第一个run已完成');//resolve代表异步操作执行成功后的回调函数
}
},10000)
});
return p;
}
run1('reject').then((data)=>{
console.log('resolved');
console.log(data);
},(reason)=>{//then的第二个参数捕捉reject
console.log('rejected');
console.log(reason);
})
或者用catch来捕捉reject并制定reject的回调：
run1('reject').then((data)=>{
console.log('resolved');
console.log(data);
}).catch((reason)=>{
console.log('rejected');
console.log(reason);
})
用catch的好处是：resolve回调抛出异常时，不会报错卡死JS，而是会进到这个catch方法中。
- all的用法：
Promise.all接收一个函数数组参数，里面的值最终都返回Promise对象。数组中的异步操作并行执行，等它们都执行完后才会进到then里面，all会把所有的异步操作的结果放进一个数组中传给then;如果执行失败，则返回最先被reject的结果值。
Promise.all([run1(),run2(),run3()]).then((result)=>{
console.log(result);
})
- race的用法：
all的执行顺序是按数组下标先后执行，但race是哪个执行得快先返回哪个结果值。
function run1(a){
var p = new Promise((resolve,reject)=>{
//这里做一些异步操作
setTimeout(()=>{
console.log('第一个run');
if(a === 'reject'){
reject('第一个run已失败');//reject代表异步操作执行失败后的回调函数
}else{
resolve('第一个run已完成');//resolve代表异步操作执行成功后的回调函数
}
},10000)
});
return p;
}
function run2(){
var p = new Promise((resolve,reject)=>{
//这里做一些异步操作
setTimeout(()=>{
console.log('第二个run');
resolve('第二个run已完成');//resolve代表异步操作执行成功后的回调函数
},5000)
});
return p;
}
Promise.race([run1(),run2()]).then((result)=>{
console.log(result);
})
打印结果，可以看到，上面的代码run2先被执行，因为run2更快。
网友评论