Peomise简介
Promise，他是一个对象，是用来处理异步操作的，可以让我们写异步调用的时候写起来更加优雅，更加美观便于阅读。顾名思义为承诺、许诺的意思，意思是使用了Promise之后他肯定会给我们答复，无论成功或者失败都会给我们一个答复，所以我们就不用担心他跑了哈哈。所以，Promise有三种状态：pending（进行中），resolved（完成），rejected（失败）。只有异步返回的结构可以改变其状态。所以，Promise的过程一般只有两种：pending->resolved或者pending->rejected，pending的状态的转变是不可逆的。
Promise对象还有一个比较常用的then方法，用来执行回调函数，then方法接受两个参数，第一个是成功的resolve的回调，另一个是失败rejected的回调，第二个失败的回调参数可选。并且then方法里也可以返回Promise对象，这样就可以链式调用了。接下来上代码:
var A = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve({ value: 'A' })
}, 2000)
})
.then(function (data) {
console.log('A做完了 B在做',data)
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve({ value: 'B' })
}, 2000)
})
}, function (err) {
console.log(err)
})
.then(function(data){
console.log('B做完了 C在做',data)
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve({ value: 'C' })
}, 2000)
})
},function(err){
console.log(err)
})
.then(function(data){
console.log('C做完了 D在做',data)
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve({ value: 'D' })
}, 2000)
})
},function(err){
console.log(err)
})
.then(function(data){
console.log('D做完了 没了',data)
},function(err){
console.log(err)
})打印结果如下
Promise实例
下面我们用Promise简单的封装一个加载图片的函数
function loadURL(url){
var img = new Image();
return new Promise((resolve,reject)=>{
img.onload = function(){
resolve(img)
}
img.onerror = function(){
reject(`${url} is not an effective URL`)
}
img.src = url
})
}
loadURL('./xxx.png').then(img=>document.body.appendChild(img),err=>console.log(err))Promise API方法
Promise API有resolve,reject,all,race方法,在它原型上有then,catch方法
var p1 = Promise.resolve(1) //返回resolved的Promise对象
var p2 = Promise.reject(2) // 返回rejected的Promise对象
var p3 = Promise.all(PromiseArray)
// PromiseArray 每个Promise对象都为resolved 返回每个Promise状态对应的值，形成的数组all用法其实也简单，数组里的每个Promise对象的状态都应为resolved,只要有一个状态为rejected就会返回当前对象，否则返回状态为resolved的数组
var p1 = Promise.resolve(1)
var p2 = Promise.reject(2)
var p3 = new Promise(resolve=>resolve(3));
var p4 = Promise.all([p1,p3]) //返回状态为resolved的数组
var p5 = Promise.all([p1,p3,p2]) //返回状态为rejected的对象-->p2race方法一般用来测试网络接口的请求速度，谁快返回谁
var p1 = Promise.resolve(1)
var p2 = Promise.reject(2)
var p3 = new Promise(resolve=>setTimeout(()=>resolve(3),3000));
var p4 = new Promise((suc,err)=>{
setTimeout(function(){
suc(4)
},4000)
})
var p5 = Promise.race([p3,p4,p2]); //返回最快的 --> p2catch方法负责失败回调函数，而then负责成功回调函数
Promise.reject(3).then(data=>console.log(data)).catch(err=>console.log(err+'err')) // 3err
Promise.resolve(3).then(data=>console.log(data)).catch(err=>console.log(err+'err')) // 3then方法，当返回时Promise对象，接下来的then所执行的函数，由返回的Promise对象决定；不是Promise对象，返回一个状态为resolve状态Promise对象
返回的时Promise对象时执行结果
var p = new Promise(function (resolve, reject) {
resolve(12)
})
p.then(data=>new Promise((suc,err)=>{
err(data)
}),err=>err+'err')
.then(data=>console.log(data),err=>console.log(err+'err')) //12err
p.then(data=>new Promise((suc,err)=>{
suc(data)
}),err=>err+'err')
.then(data=>console.log(data+'suc'),err=>console.log(err+'err')) //12suc返回的不是Promise对象时执行结果
var p = new Promise(function (resolve, reject) {
resolve(12)
})
p.then(data=>data+'suc',err=>err+'err')
.then(data=>console.log(data)) //12suc
var p = new Promise(function (resolve, reject) {
reject(12)
})
p.then(data=>data+'suc',err=>err+'err')
.then(data=>console.log(data)) //12err