一、作用:解決異步編程的一種方案,讓異步編程寫法感覺像是同步
二、用法
new Promise(function(resolve,reject){
resolve()
}).then(function(){//成功.
},function(){//失敗
}).then(function(){//成功
},function(){//失敗
})
es6之前的回調函數
{
let fn = function(callback){
console.info('111')
setTimeout(function(){
callback()
},1000)
}
fn(function(){
console.info("2323")
})
}
回調套着回調多的情況下,代碼就會嵌套很多層,比較亂
採用Promise
{
let fn = function(){
return new Promise((resolve,reject)=>{
console.info("aaa")
setTimeout(()=>{
resolve()
},1000)
})
}
fn().then(()=>{
console.info("bbb")
})
}
{
let fn = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("張三");
},1000)
})
}
fn().then(function(data){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
reject();
},1000)
})
}
).then(function(){
console.info("1")
},function(){
console.info("2")
})
}
{
let loadImg = function(srcURL){
return new Promise((res,rej)=>{
let imgs = document.createElement("img");
imgs.src = srcURL;
imgs.onload = function(){
res(imgs)
}
})
}
//多個操作一起完成後回調
Promise.all([loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564344979&di=9087da918e46807330109aedc85944c6&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F120727%2F201995-120HG1030762.jpg'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png')]
).then(function(img){
img.forEach(item=>{
document.body.appendChild(item);
})
})
}
{
let loadImg = function(srcURL){
return new Promise((res,rej)=>{
let imgs = document.createElement("img");
imgs.src = srcURL;
imgs.onload = function(){
res(imgs)
}
})
}
//完成一個就回調
Promise.race([loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564344979&di=9087da918e46807330109aedc85944c6&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F120727%2F201995-120HG1030762.jpg'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522564091129&di=c042d7ee514796ac8e875a92d487dfbd&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010a1b554c01d1000001bf72a68b37.jpg%401280w_1l_2o_100sh.png')]
).then(function(img){
document.body.appendChild(img);
})
}