1、什么是Promise
*promise是处理异步回调的解决方案
*promise对象是一个容器,里面包裹了一些异步操作,它表示一个预计会在未来完成的一个异步操作
*promise有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)
*promise 状态一旦发生改变就会凝固,会一直保持这个状态,不会再发生变化
*promise状态一旦发生改变就会触发promise的then方法,then方法中有两个默认回调函数,一个是成功后的回调resolve,一个是失败后的回调reject
*在使用promise的时候,如果代码报错,那么会自动的走then.reject回调函数,如果在then中没有写reject回调,会在catch中进行错误捕获,catch也可以捕获then方法中的报错
2、Promise实例
function fn() {
return new Promise((resolve, reject) => {
console.log('123');
setTimeout(()=>{
resolve()
},2000)
})
}
let P1=fn()
P1.then(res=>{
console.log('456');
}).then(res=>{
console.log('789');
return 'haha'
}).then(a=>{
console.log('101112');
console.log(a);
})
//123
//456
//789
//101112
//haha
3、PromiseAPI
promise.resolve()
let P=new Promise((resolve,reject)=>{
resolve(1)
})
P.then((res)=>{
console.log(res);//1
})
let p1 = Promise.resolve(1)
p1.then((res) => {
console.log(res); //1
})
promise.reject()
let P = new Promise((resolve, reject) => {
reject(1)
});
P.then((res) => {
console.log(res);
}).catch(err => {
console.log(err);
})
let P1 = Promise.reject(1)
P1.then((res) => {
console.log(res);
}).catch(err => {
console.log(err);
})
*all():如果都成功就正常返回,如果有一个失败,那么都会认为是失败的
let P1=new Promise((resolve,reject)=>{
resolve('111')
})
let P2=new Promise((resolve,reject)=>{
resolve('222')
})
let P3=new Promise((resolve,reject)=>{
reject('333')
})
let cal=Promise.all([P1,P2,P3])
//console.log(cal)
cal.then(resolve=>{
console.log('成功')
},reject=>{
console.log('失败')
})
*race:返回的也是一个promise对象, race方法谁先有结果,就返回谁,无论成功还是失败(成功就走resolve,失败的会在reject中返回)
let P1=new Promise((resolve,reject)=>{
resolve('111')
})
let P2=new Promise((resolve,reject)=>{
resolve('222')
})
let P3=new Promise((resolve,reject)=>{
reject('333')
})
let rce=Promise.race([P1,P2,P3])
//console.log(cal)
rce.then(resolve=>{
console.log('成功')
},reject=>{
console.log('失败')
})
4、PromiseAPI和应用
//html
<div id="imglist" class="imglist"></div>
//js
<script>
//首先获取元素
let imglist=document.getElementById("imglist")
//console.log(imglist)
let imgload=function(src){
return new Promise((resolve,reject)=>{
//创建一个img标签
let img=document.createElement("img")
img.src=src
img.onload=()=>{
resolve(img)
};
img.onerror=()=>{
reject(new Error('图片加载失败'))
}
})
}
let P1=imgload("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg")
let P2=imgload("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg")
let P3=imgload("https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg")
function timer(){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve('超时')
},1000)
})
}
let P4=imgload("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg")
let rce=Promise.race([timer(),P4])
rce.then((res)=>{
//console.log(res)
if(typeof res==="string"){
imglist.innerText="图片请求超时"
}else{
imglist.appendChild(res)
}
})
</script>