Promise的使用

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>