promise
一,有三个状态
pedding(正在进行),fulfilled(执行成功),rejected(执行失败)
二,promise内含一个异步操作,异步操作控制promise状态改变
1,pedding到fulfilled
2,pedding到rejected
三,promise有两个参数,并且都是函数
1,resolve
当异步操作执行成功之后,执行resolve
并且修改promise状态为fulfilled
2,reject
当异步操作执行失败之后,执行reject
并且修改promise状态为reject
使用:
一,声明一个promise
1,字面量声明
var runAsync = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
resolve('随便什么数据');
}, 2000);
});
2,函数式声明
function runAsync(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
resolve('随便什么数据');
}, 2000);
});
return p;
}
3,返回值式声明
function runAsync(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
二,指定resolve回调函数
1,两步操作
runAsync.then(function(data){
console.log(data);
});
2,多步操作
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 2000);
});
return p;
}
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
return '直接返回数据'; //这里直接返回数据
});
先执行runAsync1,成功后执行runAsync2,成功后执行runAsync3,同步执行三个异步操作
三,reject的用法
promise中有异步操作函数,在异步操作内部对数据进行判断,然后决定执行reject还是resolve
四,catch的用法
可以指定reject函数,和then的第二个参数一样作用,但是当then的第一个回调函数参数执行失败会直接进入catch并传入失败原因,不会直接报错。一般用catch作为失败原因输出,而不是then的第二个参数。
五,promise的all用法
作用是并行执行异步操作,异步操作全部执行完毕才开始执行回调函数
用法:
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);//此处将上面三个异步操作的结果作为一个数组输出作为结果
});
使用场景:用于资源的加载,所有的都加载完后,我们再进行页面的初始化。
六,race的用法
all是全部的异步操作执行完毕,才开始执行then。race是第一个异步操作执行完毕就立马执行then的回调函数,若是第一个异步操作没有跑赢后面的异步操作,那么会进入catch执行。
例如:
//请求某个图片资源
function requestImg(){
var p = new Promise(function(resolve, reject){
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = 'xxxxxx';
});
return p;
}
//延时函数,用于给请求计时
function timeout(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
reject('图片请求超时');
}, 5000);
});
return p;
}
Promise
.race([requestImg(), timeout()])
.then(function(results){
console.log(results);
})
.catch(function(reason){
console.log(reason);
});
声明两个promise异步操作,若是请求图片快于超时的先执行完,那么执行then,反之执行catch
promise在声明后会立即执行