Promise用法详解
2019-02-14 本文已影响0人
_小小苏_
首先，Promise是一个对象，有then()方法的对象。
then()的入参是一个函数，通常在promise链中，入参是一个返回promise的函数，即入参是一个函数，这个函数会return 一个promise对象。
- 基本用法
var p = new Promise(function(resolve,reject){
console.log(1);
setTimeout(function(){
console.log('执行完成');
resolve("success"); //若此处不调用，则不会进入then方法
},200)
}).then(function(data){
console.log(data); //"success"
});
- 完整用法
function getNumber(){
var p = new Promise(function(resolve,reject){
var num = Math.ceil(Math.random()*10);
if(num<5){
resolve(num);
}else{
reject('数字大于5');
}
});
return p;
}
getNumber().then(function(data){
console.log(data) //3
}, function(data){
console.log(data) //数字大于5
});
- 链式操作用法
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);
});
//执行结果：
异步任务1执行完成
随便什么数据1
异步任务2执行完成
随便什么数据2
异步任务3执行完成
随便什么数据3
- catch用法
//getNumber()为上述函数
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
//当num<5时会输出：
resolved
3
rejected
ReferenceError: somedata is not defined
所以catch的效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在promise执行中，或者执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
then 的第二个参数和使用 catch 的区别：
- then的第一个函数里抛出了异常，catch能捕获到，then的第二个函数获取不到。
- catch 并不会报错卡死js，而是会进入到catch方法里。
- all的用法
//使用上面定义的三个函数
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
//执行结果
异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
["随便什么数据1", "随便什么数据2", "随便什么数据3"]
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
- race
//请求某个图片资源
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链：
如果有这样一个promise链：
//then()里面传的是一个返回promise对象的函数
p1().then(p2).then(p3)
.then((data)=>{
console.log('data: ' + data);
})
.catch((error)=>{
console.log('error: ' + error);
});
function p1(){
return new Promise((resolve, reject)=>{
console.log('p1 resolved');
resolve(111);
});
}
function p2(){
return new Promise((resolve, reject)=>{
console.log('p2 rejected');
reject('222');
})
}
function p3(){
return new Promise((resolve,reject)=>{
console.log('p3 resolved');
resolve(333);
})
}
//p1 resolved
//p2 rejected
//error: 222
然后再看下面：
var p1 = new Promise((resolve,reject)=>{
console.log('p1 resolved');
resolve(111);
});
var p2 = new Promise((resolve,reject)=>{
console.log('p2 rejected');
reject(222);
});
var p3 = new Promise((resolve,reject)=>{
console.log('p3 resolved');
// resolve(333);
});
p1.then(function(){
return p2;
}).then(function(){
return p3;
}).catch((error)=>{
console.log('error: ' + error)
})
p1 resolved
p2 rejected
p3 resolved
error: 222
