promise实例
Promise接受一个函数作为参数,该函数的两个参数分别是resolve成功后的回调和reject失败后的回调。
resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
let promise = new Promise((resolve, reject)=>{
resolve("1")//成功后的回调
reject("2")//失败后的回调
console.log(2)
})
Promise实例API
Promise是一个构造函数,对外提供统一的 API,自己身上有all (全部)、race (赛跑)、resolve(成功回调)、reject (失败回调)等方法,原型上有then、catch、finally等方法。
all
all 全部 Promise.all() 返回的是一个promise对象, 如果都成功就正常返回,如果有一个失败,那么都会认为是失败的。
all方法的参数是一个一个promise对象,里面的promise实例都是并行的,需要等到所有的promise都完成之后才会有结果。
都成功 返回结果是参数的顺序
let promise1 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("1");
},1000)
})
let promise2 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("2");
},3000)
})
let promise3 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("3");
},2000)
})
let pAll = Promise.all([promise1,promise2,promise3 ]);
pAll.then((res)=>{
console.log(res) //[1,2,3] 都成功 返回结果是参数的顺序
}
有任意一个失败,pAll会直接返回rejected, pAll的状态都是失败
let promise1 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("1");
},1000)
})
let promise2 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("2");
},3000)
})
let promise3 = new Promise((resolve, reject)=>{
setTimeout(()=>{
reject("err");
},2000)
})
let pAll = Promise.all([promise1,promise2,promise3 ]);
pAll.then((res)=>{
},err=>{
console.log(err) //err
});
race
race 赛跑 Promise.race() 返回的是一个promise对象, race方法谁先有结果,就返回谁,无论成功还是失败(成功就走resolve,失败的会在reject中返回)
let promise1 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("1");
},1000)
})
let promise2 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("2");
},3000)
})
let promise3 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("3");
//reject("err");
},2000)
})
let pRace= Promise.all([promise1,promise2,promise3]);
pRace.then((res)=>{
console.log(res) // 1
},err=>{
console.log(err) // err
})
then、catch、finally
then(resolve=>{},reject=>{}) 方法中有两个回调函数 分别表示成功后的回调 和失败后的回调
let promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("1");
},1000)
})
promise.then((resolve)=>{
console.log(resolve)
},reject=>{
console.log(reject)
});
catch(err=>{}) 在创建或者使用promise的时候,如果代码报错那么会自动的走then.reject 如果在then中没有reject回调,会在catch中进行错误捕获, catch方法也会捕获在then方法中发生任何错误
finally(()=>{}) 无论promise执行成功或者失败,也无论catch方法是否执行, 最终finally都会执行
PromiseAPI应用
需求 有三张图片 ,如果这三张图片都加载完成 那么就直接显示到页面中 否则就不展示
let url1 = 'http://d303.paixin.com/thumbs/1692343/230403026/staff_1024.jpg'
let url2 = 'http://d303.paixin.com/thumbs/1326558/207334188/staff_1024.jpg'
let url3 = 'http://d300.paixin.com/thumbs/1000538/6983299/staff_1024.jpg'
let imgBox = document.getElementById('imgBox') //获取父盒子
let loadImg = function (src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img') //创建img标签
img.src = src
img.onload = function () { //图片加载成功触发resolve()成功的回调
resolve(img)
}
img.onerror = function () { //图片加载失败触发reject()失败的回调
reject(new Error("404--图片加载失败"))
}
})
}
// 通过Promise.all获取所有Promise
let Pall = Promise.all([loadImg(url1), loadImg(url2), loadImg(url3)])
Pall.then(res => { //then获取所有Promise的返回值
res.forEach(item => {
imgBox.appendChild(item)
})
}).catch(err => {
console.log(err);
})
需求 有一张图片 ,当这张图片的加载时间超过1s的时候,就不去加载了,并且在页面中显示加载超时,如果1s内完成了加载,那么就在页面中进行展示
let url1 = 'http://d303.paixin.com/thumbs/1692343/230403026/staff_1024.jpg'
let imgBox = document.getElementById('imgBox') //获取父盒子
let loadImg = function (src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img') //创建img标签
img.src = src
img.onload = function () { //图片加载成功触发resolve()成功的回调
resolve(img)
}
img.onerror = function () { //图片加载失败触发reject()失败的回调
reject(new Error("404--图片加载失败"))
}
})
}
// 1.自己手动写一个Promise,给一个定时器模拟超时的时间,---如果定时器时间结束触发resolve()成功的回调
let imgout = function () {
return new Promise((resolve) => {
setTimeout(() => {
resolve('请求超时')
}, 500);
})
}
//2.通过Promise.race看最后的结果是什么,如果图片没有在手动的定时器时间之前请求完成,Promise.race.then的结构就就会是定时器里resolve()的返回值。
//否则 Promise.race.then就是图片请求最快的结果
let Rach = Promise.race([imgout(), loadImg(url1)])
Rach.then(res => {
if (typeof res !== 'string') {
imgBox.appendChild(res)
} else {
imgBox.innerText = '图片加载失败'
}
})