ES6的Promise

现如今，如果作为一个开始工作的前端，Promise在工作中是必须要用的一种东西，除非还在使用之前的ajax那种疯狂回调的请求的老项目。

Promise的出现也为我们解决回调地狱带来了一种解决方法。

当然随之ES6推出的async/await也成为如今调用方法的一种方式（之后再说）

Promise三种状态

1. pending， 等待

2. fulfilled, 完成

3. rejected 也可以说是完成，但是不是我们想要的，进入错误回调

这三种状态的关系是

pending执行之后才是剩下两个，两个不同的方向，调用之后fulfilled走then, 而rejected走错误

function func(a) {
    return new Promise((resolve, reject) => {
        if (a === 1) {
            resolve()
        } else { 
            reject()
        }
    })
}

// 
// 当func传1的时候走的then, 当func传的是其他的时候走的catch, finally不管resolve还是reject都会进入

func(1).then(() => {
    console.log('判断正确')
}).catch(() => {
    console.log('错误')
}).finally(() => {
    console.log('执行完毕')
})

了解下Promise的几个比较重要且能用到的方法

1. promise.then, promise.catch, promise.finally（上文有说，不做太多阐述）

promise.then返回的也是一个Promise对象，可以继续链式调用

2. Promise.all

这个方法在我们的日常开发中也有场景可以用到

之前参加某公司面试的时候，也被问相关的问题，由于当时公司的原因，接触不多，了解不多，导致gg

Promise.all([])接一个数组，当这个数组所有的Promise对象状态都变成fulfilled或者rejected的时候，它才会去调用then方法或者catch方法。

一旦有一个Promise状态变成rejected，会走进catch方法

如果数组中的Promise状态都变成fulfilled的话，then里面的返回顺序跟数组的顺序一致

function func(a) {
    return new Promise((resolve, reject) => {
        if (a === 1) {
            resolve('1')
        } else { 
            reject('2')
        }
    })
}

function fun2(b) {
    return new Promise((resolve, reject) => {
        if (b === 1) {
            resolve('11')
        } else { 
            reject('22')
        }
    })
}

Promise.all([func(1), fun2(1)]).then(res => {
    console.log('then', res) // then [ '1', '11' ]
}).catch(res => {
    console.log('catch', res)
}).finally(res=> {
    console.log('finally', res)
})

3. Promise.allSettled

这个的出现主要是上面的Promise.all在数组中只要有一个Promise rejected之后就会进入reject,并且返回的是数组中第一个rejected的返回信息，导致fulfilled的Promise无法进入Promise.all的then

同样的上文的代码，配置一个进入rejected的Promise对象，返回值如下

function func(a) {
    return new Promise((resolve, reject) => {
        if (a === 1) {
            resolve('1')
        } else { 
            reject('2')
        }
    })
}

function fun2(b) {
    return new Promise((resolve, reject) => {
        if (b === 1) {
            resolve('11')
        } else { 
            reject('22')
        }
    })
}

Promise.allSettled([func(1), fun2(12)]).then(res => {
    console.log('then', res) //then [{ status: 'fulfilled', value: '1' },{ status: 'rejected', reason: '22' }]
}).catch(res => {
    console.log('catch', res)
}).finally(res=> {
    console.log('finally', res)
})

这个方法，可以返回当前数组里Promise的每个的状态，我们可以根据这个来做下一步操作

Promise的方法和基本用法就是这些了

但是有个问题出现了，如果一直then里面执行Promise，那也会出现回调地狱的情况

function func(a) {
    return new Promise((resolve, reject) => {
        if (a === 1) {
            resolve('1')
        } else { 
            reject('2')
        }
    })
}

function fun2(b) {
    return new Promise((resolve, reject) => {
        if (b === 1) {
            resolve('11')
        } else { 
            reject('22')
        }
    })
}


function fun3(b) {
    return new Promise((resolve, reject) => {
        if (b === 1) {
            resolve('11')
        } else { 
            reject('22')
        }
    })
}

func(1).then(() => {
    fun2(1).then((res) => {
        fun3(1).then((res) => {
            ... //依次递增
        })
    })
})

为了解决这种情况，async/await是一种不错的解决方法

看下篇