ES6之Promise对象

异步

传统方法

let ajax = function(callback){
setTimeout(function() {
callback&&callback.call();
}, 500);
}
ajax(function(){
console.log('hello')
})

let ajax = function(){
console.log('执行2');
// 返回一个对象，这个对象就是一个promise实例
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve();
},1000)
})
}
//ajax运行后返回一个promise实例，具有.then方法,表示执行下一步。then的函数体就是下一步
ajax().then(function(){
console.log('promise','timeout2');
})

Promise的作用

　　相比较而言，结果上一模一样。但是ES6具有更好的可读性、可维护性。

Promise的基本用法

Promise.all

function loadImg(src){
return new Promise((resolve,reject)=>{
let img = document.createElement("img");
img.src = src;
img.onload = function(){
resolve(img);
}
img.onerror = function(err){
reject(err);
}
})
}

function showImgs(imgs){
imgs.forEach(function(img){
document.body.appendChild(img);
})
}

Promise.all([
loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png')
]).then(showImgs)

执行结果：

如果有一个图片正在加载中，这三个图片就都不会显示！

Promise.race

// 有一个图片加载完就添加到页面
function loadImg(src){
return new Promise((resolve,reject)=>{
let img = document.createElement("img");
img.src = src;
img.onload = function(){
resolve(img);
}
img.onerror = function(err){
reject(err);
}
})
}

function showImgs(img){
let p = document.createElement('p');
p.appendChild(img);
document.body.appendChild(p);
}

Promise.race([
loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png')
]).then(showImgs)