Promise的深入理解

目录

概念

Promise的基本使用

Promise的代码结构

Promise的对象方法（三种）

Promise的类方法（六种）

---

概念

promise其实是异步（async）请求的处理方案，应用于对数据的请求做响应

Promise的基本使用

const promise = new Promise((resolve, reject) => {

})

promise.then((res) => {
    // 请求成功的回调函数
    console.log("res")
}, (err) => {
    // 请求失败的回调函数
    console.log("err")
})

解析上图：new出了一个Promise实例------promise，此时的Promise构造函数的起始函数（也就是（resolve, reject））携带了两个形参，当Promise被构造时，这个起始函数会被异步直接运行的，如：

const promise = new Promise((resolve, reject) => {
    console.log("我被执行了")
})

程序会直接打印"我被执行了"

我们不难发现第一张图可以进行简化书写成：

new Promise((resolve, reject) => {
    console.log("我被执行了")
}).then(res => {         // ES6语法：当箭头函数前面的参数只有一个时，可以省略括号
    // 请求成功的回调函数
    console.log(res)
}, err => {
    // 请求失败的回调函数
    console.log(err)
})

Promise的代码结构

上述实例的执行过程中，可以划分为三个状态：

• pending   初始状态（在等待中，既没被兑现，也没有被拒绝）
• fulfilled     已兑现   也就是执行了请求成功的回调函数
• rejected   已拒绝    也就是执行了请求失败的回调函数

Promise的对象方法（三种）

1.then() 接收两个参数：fulfilled的回调函数、rejected的回调函数，也就是then方法能将参数中的函数添加到Promise的正常执行序列当中

• Promise是能够被多次调用then()，如：

<script>
    const promise = new Promise((resolve, reject) => {
        resolve("我被调用了几次就显示几次")
    })

    promise.then(res => {
        console.log(res)
    })
    promise.then(res1 => {
        console.log(res1)
    })
    promise.then(res2 => {
        console.log(res2)
    })
</script>

// 打印结果

我被调用了几次就显示几次
我被调用了几次就显示几次 

我被调用了几次就显示几次

• then()本身的返回值就是一个Promise

<script>
    const promise = new Promise((resolve, reject) => {
        resolve("我是原来的")
    })

    promise.then(res => {
        return "我会返回一个新的Promise"
    }).then(res => {
        console.log(res)
    })
</script>

打印：我会返回一个新的Promise         

// 可见then()返回的是一个新的Promise，最终状态由新的Promise决定

2.catch() 是Promise用来捕获进程错误或异常的序列，只要then()依次传入的函数程中发现有任何的异常，都会直接跳到catch()，可将异常抛出。

注意：catch()返回的也是一个新的Promise

<script>
    const promise = new Promise((resolve, reject) => {
        resolve("此时我发现了序列中的函数异常并移交给carch方法去抛出")
    })

    promise.then(res => {
        throw new Error("then error")
    }).catch(err => {
        console.log(err)
    })
</script>

打印结果：Error: then error         // 并非报错

3.finally() 是ES9新增的一个特性，无论Promise的状态是fulfilled状态或是rejected状态,它最终都会去执行

<script>
    const promise = new Promise((resolve, reject) => {
        resolve("我是成功的")
        // reject("我是异常的")
    })

    promise.then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        console.log("我是不需要带参数的")
    })
</script>

// 我是成功的
// 我是不需要带参数的

Promise的类方法（六种）

场景一：当你想将对象转成Promise，可以使用ES6提供的resolve()

<script>
    const promise = Promise.resolve({
        studentName: "张三"
    })

    promise.then(res => {
        console.log(res)
    })
</script>

场景二：直接返回一个拒绝值，reject()

<script>
    const promise = Promise.reject("rejected: error")

    promise.then(res => {
        console.log(res)
    }).catch(err => {
        consloe.log(err)
    })
</script>

场景三：当你需要等Promise的状态都为fulfilled时，拿到总的结果（项目较为常用）all()

<script>
    // 通过计数器展示
    const promise1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("1s")
        }, 1000)
    })
    const promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("2s")
        }, 2000)
    })
    const promise3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("3s")
        }, 3000)
    }) 

    Promise.all([promise1, promise2, promise3]).then(res => {
        console.log(res)
    })
</script>

此时等待3s即可打印全部结果

若其中有一个是异常的，则使用all方法会只抛出这个异常结果

场景四：弥补all方法不能在出现某个异常时就会直接catch()的不方便，allSettled()会拿到最终全部结果，不论状态时fulfilled还是rejected

<script>
    // 通过计数器展示
    const promise1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("1s")        // 这里出现了异常
        }, 1000)
    })
    const promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("2s")
        }, 2000)
    })
    const promise3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("3s")
        }, 3000)
    }) 
    
    Promise.allSettled([promise1, promise2, promise3]).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
</script>

场景五：race() 只要有一个是fulfilled状态的，立刻返回结果，不过如果最快那个刚好是异常，那么会出现只抛出异常

<script>
    // 通过计数器展示
    const promise1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("1s")
        }, 1000)
    })
    const promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("0.5s")      // 这里最快，只打印最快
        }, 500)
    })
    const promise3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("3s")
        }, 3000)
    }) 
    
    Promise.race([promise1, promise2, promise3]).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
</script>

场景六：any() 必须等到有一个fulfilled状态才结束，如果都是异常也会全部序列都执行并执行catch()

与上述相似就不再演示，这篇文章就到这里，觉得有帮助的就点个赞吧~