JavaScript —— ES6 -- Promise

1.什么是Promise

• Promise是异步编程的一种解决方案。
• Promise是一个对象，它代表了一个异步操作的最终完成或者失败。

2.基本用法

用定时器来模拟异步事件，成功的时候调用resolve

new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve("success")
    },1000)
}).then((data) => {
    console.log(data)
})

失败的时候调用reject

new Promise((resolve,reject) => {
    setTimeout(() => {
        reject("failed")
    },1000)
}).catch((data) => {
    console.log(data)
})

• new Promise创建一个 Promise 对象
• resolve 和 reject 也是函数，我们会根据异步操作的结果来决定调用谁。如果是成功的，调用 resolve() ，之后的 then 会被回调。如果是失败的，调用 reject() ，之后的 catch 会被回调。

3.Promise三种状态

Promise有 pending 、fulfilled 和 rejected 三种状态，这三种状态是由异步操作的结果决定的。

• pending（等待），比如正在进行网络请求或者定时器未到时间。
• fulfilled（成功），主动回调了 resolve() ，就处于这个状态，并且之后会回调 then 。
• rejected（失败），主动回调了 reject() ，就处于这个状态，并且之后会回调 catch 。

4.Promise的链式调用

new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve("timeout")
    },1000)
}).then((data) => {
    return data + "-aaa"
}).then((data) => {
    return data + "-bbb"
}).then((data) => {
    console.log(data)
    // timeout-aaa-bbb
})

5.Catch的链式操作

new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve("timeout")
    },1000)
}).then((data) => {
    throw 'error message'
    return data + "-aaa"
}).then(() => {
    return data + "-bbb"
}).catch((data) => {
    console.log(data)
    // error message
})

6.Promise.all

Promise.all接受Promise的数组，待数组里都执行完成后，执行then

Promise.all([
    new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("promise1")
        },1000)
    }),
    new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("promise2")
        },2000)
    })
    ]).then((data) => {
        console.log(data)
        //  2s后打印["promise1", "promise2"]
    })

7.Promise.race

Promise.race接受Promise的数组，当数组里面有一个执行完成，执行then

Promise.race([
    new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("promise1")
        },1000)
    }),
    new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("promise2")
        },2000)
    })
]).then((data) => {
    console.log(data)
    //  1s后打印promise1
})