不废话，上来就整，先看一下写法，new了个构造函数，传了两个匿名函数参数resolve,reject,分别是成功和失败,需要注意的一点就是new完之后就开始执行，很果断，不带犹豫的，这就是promise的脾气啊
{
let p=new Promise((resolve,reject)=>{
setTimeout(
()=>{
console.log('2');
resolve('success');
},0);
}).then((res)=>{
console.log(res+1);
return 3;
}).then((res)=>{
console.log(res);//3
});
}
下面来一段img加载的代码，由于promise脾气太过于耿直，so，咱们把他扔到function里，把他return出去，这样就可以随时随用了，再也不用担心promise的脾气了，这段代码里加了一个then，then是什么鸟呢，他是promise上面一个方法，传两个匿名函数，一个成功，一个失败，在promise的resolve里面传的参数就会传到then的成功函数里，同样的reject也是
{
function loadImg(url){
const p=new Promise((resolve,reject)=>{
let img=new Image();
img.onload=function (){
resolve('加载成功');
console.log('success');
};
img.onerror=function (){
reject('加载失败');
console.log('error');
};
img.src=url;
console.log(url);
});
return p;
}
//加载图片
loadImg('http://imgsrc.baidu.com/imgad/pic/item/
267f9e2f07082838b5168c32b299a9014c08f1f9.jpg').then((suc)=>{
console.log(suc)
return loadImg('http://imgsrc.baidu.com/');
//成功
},(err)=>{
console.log(err);
//失败
}).then(suc=>{
console.log(suc);
alert(suc);
},err=>{
console.log(err);
alert(err);
});
//上面就是resolve方法使用，当然reject也是这种用法，
then真是犀利的 一B啊
}
look一下all的用法,感觉这特么的就是个大招啊,异步执行的，并且在所有异步操作执行完后才执行回调，谁拖大腿根听谁的
{
function getImg(url){
const p=new Promise((resolve,reject)=>{
let img=new Image();
img.src=url;
img.onload=function (){
resolve('suc');
};
img.onerror=function (){
reject('err');
};
});
return p;
}
function hideBanner(flag){
let p=new Promise((resolve,reject)=>{
setTimeout(()=>{
if (flag){
resolve('隐藏成功');
}else{
reject('失败');
}
},1000);
console.log('隐藏图片');
});
return p;
}
Promise.all([getImg('http://imgsrc.baidu.com/imgad/pic/item/
267f9e2f07082838b5168c
32b299a9014c08f1f9.jpg'),hideBanner(true)]).then((results)=>{
console.log(results);//["suc", "隐藏成功"]
});
//传的这个URL路径是错误的并不会加载成功，所以会走reject
Promise.all([getImg('http://imgsrc.baidu.com
/pic/item/267f9e2f07082838b51
68c32b8f1f9.jpg'),hideBanner(false)]).then((results)=>{
console.log(results);
}).catch(e=>{
console.log(e);//err
});
//promise真是个够义气的哥们啊，要么都成功，要么一个失败，就都失败
}
再see一下race的方法，这个也是异步的，但是跟all不同的是，谁跑的快听谁的，谁跑到终点就开始执行then了
{
function timeout1(){
let p=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('我是1s就执行');
},1000);
});
return p;
}
function timeout2(){
let p=new Promise((resolve,relect)=>{
setTimeout(()=>{
console.log('console出来的==》我是2s就执行');
resolve('我是2s就执行');
},2000);
});
return p;
}
Promise.race([timeout1(),timeout2()]).then((results)=>{
console.log(results);//我是1s就执行
});
//很明显，timeout1先执行完，所以then就输出timeout1的成功参数，那么就别以为timeout2就不执行了，其实人家也执行着呢，只不过没有在then里体现出来，那就有人问了，这玩意有个鸟用啊，你还真说对了，这玩意还真有个鸟用，下面看一下请求图片的时候，或者请求借口的时候时间长了如果还没有成功，那就是成功的挂掉了，我们得给用户一个反馈
function getImg(url){
const p=new Promise((resolve,reject)=>{
let img=new Image();
img.src=url;
img.onload=function (){
resolve('suc');
};
img.onerror=function (){
console.log('gua');
//reject('err');
//注意这里，因为要在timeout上做失败处理，所以这里就不要执行reject了，因为一旦把状态变为rejected，那么就不会执行timeout了
};
});
return p;
}
function timeout(){
let p=new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('诶哟~挂掉了');
},5000);
});
return p;
};
Promise.race([getImg('http://imgsrc.baidu.com/imgad/hehe'),timeout()]).then((result)=>{
console.log(result);
}).catch(e=>{
console.log(e);//诶哟~挂掉了
});
}
再来讲一下catch的方法
//在上面的例子中可以看出，catch是可以顶替reject对应的匿名函数的，那么还有一个作用，是用来顶替try catch的，来看一下下面的例子
{
let p=new Promise((resolve,reject)=>{
reject('error');
show();//未定义这个show函数
}).then(res=>console.log(res)).catch(e=>{
console.log(e);//error
//下面还可以执行别的代码，如果不用catch的话，js报错就挂掉了，不往下执行了，并且过滤掉了show这个错误
console.log('继续执行代码');
});
}
{
let p=new Promise((resolve,reject)=>{
show();//未定义这个show函数
}).then(res=>console.log(res)).catch(e=>{
console.log(e);//show is not defined
//下面还可以执行别的代码，如果不用catch的话，js报错就挂掉了，不往下执行了，状态不是reject和resolve的话，不会过滤掉show这个错误
console.log('继续执行代码');
});
}
//在then里报错,还是会进到catch里面，不会影响代码继续执行
{
let p=new Promise((resolve,reject)=>{
resolve('success');
}).then(res=>{
console.log(res);
show();//未定义这个show函数
}).catch(e=>{
console.log(e);//show is not defined
//下面还可以执行别的代码，如果不用catch的话，js报错就挂掉了，不往下执行了
console.log('继续执行代码');
});
}
关于promise就介绍这么多，希望对你有所帮助，如果想看更详细的资料，请狠狠的点击我
网友评论