Promise原理及常用操作

一、Promise介绍

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象 。
------MDN

意思就是说，promise可以把异步的操作用同步的方式表达。 我们知道用XHR对象发起多个异步请求的时候，无法保证响应返回的顺序，使用回调函数来控制响应顺序时会形成回调地狱，代码难以维护，而且容易出错，所以就有了Promise对象。

当时用Promise模式时，可以将未来才会发生的事作为一个任务保存，每个任务都含有一个状态（pending 或 fulfilled 或 rejected）。状态一经改变就不会再恢复。无论当前任务成功还是失败，任务链都不会终止，直到所有任务状态都改变，才会结束任务。

二、Promise使用方法

1.resolve(),reject()分别对应then(),.catch()

let promise = new Promise((resolve, reject) => {
    reject()
//可以传参,如：resolve(1111)，那么.then的response可以接受这个参数。
//reject(2222)，那么.catch的error可以接受这个参数。
}

2…then(),.catch(),分别对应resolve(),reject()。

<script>
let promise = new Promise((resolve, reject) => {
    reject(111)
})
promise.then(response => { //调用resolve()时执行
    console.log('成功')
    console.log(response)  //控制台打印111
}).catch(error =>{         
    console.log('222')     //如果promise实例调用reject()，控制台会输出222
})
</script>

3.链式

function promise1(status){
    return new Promise((resolve,reject) => {
        if(status){
            console.log('promise1 resolve')
            resolve('promise1返回数据成功')    
        }
        if(!status){
            console.log('promise1 reject')   //打印在控制台
            reject('promise1返回数据失败')    //reject()内的参数打印在出错信息里，
            //.then或者.error接收参数之后，可以console.log(response),此时就会输出在控制台
        }
        reject(222)
    })
}
 
function promise2(status){
    return new Promise((resolve,reject) => {
        if(status){
            console.log('promise2 resolve')
            resolve('promise2返回数据成功')    
        }
        if(!status){
            console.log('promise2 reject') 
            reject('promise2返回数据失败')    
        }
        reject(222)
    })
}
 
function promise3(status){
    return new Promise((resolve,reject) => {
        if(status){
            console.log('promise3 resolve')
            resolve('promise3返回数据成功')    
        }
        if(!status){
            console.log('promise3 reject')   
            reject('promise3返回数据失败')    
        }
        reject(222)
    })
}
promise1(true)
 
promise1(false).then(response => {//单独调用
    console.log(response)
}).catch(error => {
    conlole.log(err)
})
 
promise1(false).then(response => {//链式调用
    console.log(response)
    return promise3(true)
}).then(response => {
    console.log(response)
    return promise2(false)
}).catch(error => {
    console.log(error)
}).catch(error => {
    conlole.log(err)
})

4…all()数组内有promise，必须全部成功才会执行.then回调，有一个不成功就会执行.catch

Promise.all([promise1(true),promise2(true),promise3(false)]).then(response => {
    console.log('全部调用成功')
}).catch(error => {
    console.log('没有全部调用成功') 
})

补充：如果需要遍历处理数组，每一项都有一个异步操作，那么可以用Promise.all

async fun(){
  const promise = arr.map(item=>{
    this.getVal(item) // 异步操作，此map不需要rutern
  })
  await Promise.all(promise)
  this.setArr(val, arr) // all执行完成后要进行的操作
}

5. .race(),数组内遇到返回结果为resolve就会继续链式执行，即只要有一个是resolve，就代表成功，但是如果第一个promise结果是reject，则失败。

Promise.race([promise1(true),promise2(true),promise3(false)]).then(response => {
    console.log('全部调用成功')
}).catch(error => {
    console.log('没有全部调用成功') 
})
 
Promise.race([promise1(false),promise2(true),promise3(false)]).then(response => {
    console.log('全部调用成功')
}).catch(error => {
    console.log('没有全部调用成功') 
})