核心提示：1. 什么是PromisePromise是ES6中新增的异步编程解决方案，体现在代码中它是一个对象可以通过 Promise 构造函数来实例化。 new Promise(cb) === 实例的基本使用 ...
1. 什么是Promise
Promise是ES6中新增的异步编程解决方案，体现在代码中它是一个对象
可以通过 Promise 构造函数来实例化。 new Promise(cb) ===> 实例的基本使用 Pending Resolved Rejected* 两个原型方法： Promise.prototype.then() Promise.prototype.catch()
* 两个常用的静态方法： Promise.all() Promise.resolve()
Promise的状态 new Promise(cb) Pending (进行中) ===> Resolved (已完成) Pending (进行中) ===> Rejected (已失败)
举个栗子
var imgs = ['https://i1.piimg.com/1949/4f411ed22ce88950.jpg', 'https://i1.piimg.com/1949/5a35e8c2b246ba6f.jpg', 'https://i1.piimg.com/1949/1afc870a86dfec5f.jpg'];
const p = new Promise(function (resolve, reject){
const img = new Image();
img.src = '';
img.onload = function (){
resolve(this);
};
img.onerror = function (){
reject(new Error('图片加载失败'));
};
});
console.log(123);
p.then(function (img){
console.log('加载完成');
document.body.appendChild(img)
}).catch(function (err){
console.log(err);
})
console.log(456);
打印结果为 123，456，Error:图片加载失败
将上面函数封装一下，第一个图片会加载进来，如下所示
function loadImg(url) {
var p = new Promise(function (resolve, reject) {
var img = new Image();
img.src = url;
img.onload = function () {
resolve(this);
};
img.onerror = function () {
reject(new Error('图片加载失败'));
};
});
return p;
}
loadImg(imgs[0]).then(function (img){
document.body.appendChild(img)
})
2. Promise.all
Promise.all 可以将多个Promise实例包装成一个新的Promise实例 当所有Promise实例的状态都变成resolved，Promise.all的状态才会变成resolved，此时返回值组成一个数组，传递给then中的resolve函数。 只要其中有一个被rejected，Promise.all的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。举个栗子
function loadImg(url) {
var p = new Promise(function (resolve, reject) {
var img = new Image();
img.src = url;
img.onload = function () {
resolve(this);
};
img.onerror = function () {
reject(new Error('图片加载失败'));
};
});
return p;
}
const allDone = Promise.all([loadImg(imgs[0]), loadImg(imgs[1]), loadImg('')]);
allDone.then(function (datas){
datas.forEach(function(item, i) {
document.body.appendChild(item);
});
}).catch(function (err){
console.log(err);
})
结果是没有一张打印出来，而且控制台报错
3. Promise.resolve
1) 参数是Promise实例，将不做任何修改、原封不动地返回这个实例。
Promise.resolve(loadImg(imgs[0])).then(function (img){
document.body.appendChild(img);
})
第一张图片添加进来
2) 将对象转为Promise对象，然后就立即执行thenable对象的then方法。
Promise.resolve({
then(resolve, reject){
const img = new Image();
img.src = imgs[1];
img.onload = function (){
resolve(this);
}
}
}).then(function (img){
document.body.appendChild(img);
});
3) 参数是基本的数据类型或者不传参数
Promise.resolve('miaov').then(function (str){
console.log(str);//miaov
})
var p = Promise.resolve();
console.log(p);//resolve
