JS的同步异步处理——Promise

一、什么是Promise

        一个 Promise 是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。

二、Promise的三种状态

• 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）：意味着操作成功完成。
• 已拒绝（rejected）：意味着操作失败。

我们在使用Promise时，可以用resolve, reject两个函数来控制其状态，前者时通过，后者是拒绝

三、用Promise处理并发的常用方法

1.Promise.all()

在所有传入的 Promise 都被兑现时兑现；在任意一个 Promise 被拒绝时拒绝。

案例展示：

（1）全部都通过

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.all([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

（2）有一个拒绝

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.all([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

（3）全部被拒绝 

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.all([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

2.Promise.allSettled()

在所有的 Promise 都被敲定时兑现。

案例展示：

（1）全部通过

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.allSettled([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

（2）部分被拒绝

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.allSettled([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

 结果：

（3）全部被拒绝

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.allSettled([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

3.Promise.any()

在任意一个 Promise 被兑现时兑现；仅在所有的 Promise 都被拒绝时才会拒绝。

案例展示：

（1）全部通过

    const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 5000)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.any([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

注意函数触发时间

（2）部分不通过

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 5000)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.any([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

（3）全部不通过

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.any([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

4.Promise.race()

在任意一个 Promise 被敲定时敲定（即第一个）。

案例展示：

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 5000)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.race([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.race([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

结果：