Promise
1.基础结构
Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。
new Promise(function(resolve,reject)
{
..
});
function getImgs(src) {
return new Promise(function (resolve, reject) {
let img=new Image();
img.src=src;
img.onload=function (e) {
resolve(img);
};
img.onerror=function (e) {
reject("错误")
}
});
}
getImgs("img/Actor01-Braver01.png").then(function (img) {
console.log(img);
},function (error) {
console.log(error)
})
2.then
Promise必须提供一个then方法,用以访问当前值、最终的返回值以及失败的原因
最基本的then方法接受两个函数参数 promise.then(成功执行的函数, 错误执行的函数),对应于状态变化到Resolved和Rejected时的函数调用
3.catch方法
方法带一个参数,为失败时的回调。其实.catch方法就是 .then(undefined, onRejected)的简化版
getImgs("img/Actor01-Braver01.png").then(function (img) {
console.log(img);
}).catch(function (error) {
console.log(error)
})
4.链式异步
getImgs("img/item_0.png").then(function (img) {
document.body.appendChild(img);
return getImgs("img/item_2.png");
}).then(function (img) {
document.body.appendChild(img);
return getImgs("img/item_3.png");
}).then(function (img) {
document.body.appendChild(img);
})
5.all的使用
Promise.all([getImgs("img/item_2.png"),getImgs("img/item_0.png"),getImgs("img/item_3.png")])
.then(function (imgArr) {
//这里可以根据异步调用的先后顺序获取到一个数组,数组中就是所有异步传入的参数
for(let i=0;i<imgArr.length;i++){
document.body.appendChild(imgArr[i]);
}
})
all用于全部异步完成统一执行
6.race的使用
Promise.race([getImgs("img/item_-1.png"),getImgs("img/item_2.png"),getImgs("img/item_0.png")])
.then(function (img) {
//race就是赛跑,这里只返回最先加载的数据
document.body.appendChild(img);
})
race用于同时执行多个异步,如果那个先完成就直接结束,处理这个先完成的