• Promise从入门到精通 (第二章 Promise的理解和使用)

    Promise从入门到精通 （第2章 Promise的理解和使用）

    第二章 Promise的理解和使用

    2.1 Promise 的状态 - PromiseState

    实例对象中的一个属性 『PromiseState』,此属性是内置的，我们不能对此属性做操作

    三种可能的值：

    • 1.pending 未决定的( 初始化的默认值 )
    • 2.resolved / fullfilled 成功
    • 3.rejected 失败

    2.2 Promise的状态改变

    Promise的状态改变只有以下两种可能

    1. 由最初始状态pending变为 resolved状态

    2. 由最初始状态pending 变为 rejected状态

    说明: 只有这 2 种, 且一个 promise 对象只能改变一次,

    无论变为成功还是失败, 都会有一个结果数据

    成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

    2.3 Promise 对象的值 - PromiseResult

    实例对象中的另一个属性 『PromiseResult』
    保存着异步任务『成功/失败』的结果

    • 只有resolve函数 和 reject 函数能够对实例对象中的PromiseResult进行修改

    2.4 promise的基本流程

    在这里插入图片描述

    首先通过new Promise()创建一个对象，在Promise封装异步操作，如果异步操作执行成功，则执行resolve()函数，然后resolve会将状态改为成功，然后调用then方法时会调用第一个回调函数，然后返回一个新的Promise对象(then方法的返回结果也是一个新的Promise对象)

    如果异步操作失败了，则执行reject函数，reject函数会将状态改为失败，然后调用then方法时会调用第二个回调函数，然后返回一个新的Promise对象。

    2.5 如何使用Promise？

    2.5.1 API

    1. Promise 构造函数: Promise (excutor) {}

    ​ (1) executor 函数: 执行器 (resolve, reject) => {}

    ​ (2) resolve 函数: 内部定义成功时我们调用的函数 value => {}

    ​ (3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

    说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

    1. Promise.prototype.then 方法: (onResolved, onRejected) => {}

    ​ (1) onResolved 函数: 成功的回调函数 (value) => {}

    ​ (2) onRejected 函数: 失败的回调函数 (reason) => {}

    说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象

    1. Promise.prototype.catch 方法: (onRejected) => {}

    ​ (1) onRejected 函数: 失败的回调函数 (reason) => {}

        <script>
       const p = new Promise((resolve, reject)=>{
            // 调用reject
            reject("err")
        });
        p.catch(reason=>{
            console.log(reason);
        })
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2.6 Promise.resolve方法

    1. Promise.resolve 方法: (value) => {}

    ​ (1) value: 成功的数据或 promise 对象

    ​ 说明: 返回一个成功/失败的 promise 对象

    Promise.resolve是Promise函数对象的，并不属于实例对象，此方法接收一个参数，返回一个成功或失败的Promise对象

    作用：为了快速得到一个Promise对象，可以封装一个值，将值转换为Promise对象

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        // 如果传入的参数为 非Promise类型的对象，则返回的结果为成功的Promise对象
        let p1 = Promise.resolve(123);
        console.log(p1)

        // 如果传入的参数为Promise对象，则参数的结果决定了resolve的结果

        // 参数的结果是成功的
        let p2 = Promise.resolve(new Promise((resolve, reject)=>{
            resolve("success");
        }))
        console.log(p2)

        // 参数的结果是失败的
        let p3 = Promise.resolve(new Promise((resolve, reject)=>{
            resolve("fail");
        }))
        console.log(p3)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    2.7 Promise.reject方法

    \5. Promise.reject 方法: (reason) => {}

    (1) reason: 失败的原因

    作用: 返回一个失败的 promise 对象，无论传入什么参数，都返回失败的promise 对象，失败的结果为传入的参数

        <script>
        let p4 = Promise.reject(123);
        console.log(p4)

        let p5 = Promise.reject(new Promise((resolve, reject) => {
            resolve("fail");
        }))
        console.log(p5)
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述

    2.8 Promise.all方法

    Promise.all 方法: (promises) => {}

    (1) promises: 包含 n 个 promise 的数组

    说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就

    直接失败

    	<script>        
	   let p1 = new Promise((resolve, reject) => {
            resolve("ok");
        })
        let p2 = Promise.resolve("success");
        let p3 = Promise.resolve("oh");

        let p4 = Promise.reject("err")
        
        // all方法中的参数都成功，返回的结果result才是成功的，结果值是p1,p2,p3中成功结果组成的数组
        const result = Promise.all([p1, p2, p3])
        console.log(result)

        // all方法中的参数有一个失败，返回的结果result就失败，结果值是失败promise对象失败的结果
        const result2 = Promise.all([p1, p2, p4])
        console.log(result)

    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述

    2.9 Promise.race方法

    Promise.race 方法: (promises) => {}

    (1) promises: 包含 n 个 promise 的数组

    说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是Promise.race方法最终的结果状态

          <script>
        let p1 = new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve("ok");
            }, 1000)
        })
        let p2 = Promise.resolve("success");
        let p3 = Promise.resolve("oh");

        // 在传入race方法中的三个promise对象p1,p2,p3中，p2最先完成Promise状态的改变，因此其就是result的最终状态
        const result = Promise.race([p1,p2,p3]);
        console.log(result)
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    2.10 promise 的几个关键问题

    2.10.1 改变Promise状态的三种方式

    如何改变 promise 的状态?

    (1) resolve(value): 如果当前是 pending 就会变为 resolved

    (2) reject(reason): 如果当前是 pending 就会变为 rejected

    (3) 抛出异常: 如果当前是 pending 就会变为 rejected

         <script>
        // 改变Promise状态的三种方式
        let p1 = new Promise((resolve, reject) => {
            // 方式一：通过resolve函数改变
            // resolve("ok");  // Promise状态由pending变为resolve(fulfilled)
            // 方式二：通过reject函数改变
            // reject("err")  // Promise状态由pending变为reject
            // 方式三：通过抛出错误改变
            throw new Error("出错了")  // Promise状态由pending变为reject
            // throw "cuow";
        })
        console.log(p1)
      </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    2.10.2 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

    一个 promise 指定多个成功/失败回调函数, 都会调用吗?

    当 promise 改变为对应状态时都会调用

          <script>
		let p1 = new Promise((resolve, reject) => {
            resolve("ok");  
        })
        // 指定第一个回调函数
        p1.then(value=>{
            console.log("ok")
        });
        // 指定第二个回调函数
        p1.then(value=>{
            alert("ok")
        });
	</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    2.10.3 改变 promise 状态和指定回调函数执行谁先谁后?

    改变 promise 状态和指定回调函数谁先谁后?

    (1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

    (2) 如何先改状态再指定回调?

    ① 在执行器中直接调用 resolve()/reject()

    ② 延迟更长时间才调用 then()

    (3) 什么时候才能得到数据?

    ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据

    ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

         <script>
        /*
            情况一：先改变状态，后指定回调的情况
                当Promise执行器中的的任务是同步任务，直接去调用resolve，
                这种情况下是先改变Promise对象的状态，再指定回调
        */ 
        let p = new Promise((resolve, reject) => {
            resolve("ok");  
        })
        p.then(value=>{
            console.log(value)
        },reason=>{
        });
    </script>

	<script>
        /*
            情况二：先执行then方法，后改变状态
            当Promise执行器中的的任务是异步任务时，改变状态需要一段时间
            那么就先执行then方法，然后再改变状态
        */ 
        let p = new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve("ok");
            })
        })
        p.then(value=>{
            console.log(value)
        },reason=>{
        });
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    2.10.4 promise.then()返回的新 promise 的结果状态由什么决定?

    promise.then()返回的新 promise 的结果状态由什么决定?

    (1) 简单表达: 由 then()指定的回调函数执行的结果决定

    (2) 详细表达:

    ​ ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

    ​ ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值

    ​ ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

    	<script>   
		let p = new Promise((resolve, reject) => {
            resolve("ok");
        })
        const result = p.then(value=>{
            // 情况一：抛出错误 
            /*
                如果then函数执行此回调函数，并抛出错误，
                那么result的状态就是rejected，结果值就是抛出的值
            */ 

            // throw '出问题了'

            // 情况二： 返回的结果时非 Promise 类型的对象
            /*
                如果then函数执行此回调函数，并返回非Promise 类型的对象，
                那么result的状态就是resolve，结果值就是返回的值
            */ 
            // return 123;

            // 情况三： 返回的结果时Promise 类型的对象
            /*
                如果then函数执行此回调函数，并返回Promise类型的对象，
                那么result的状态就是返回Promise对象的状态，结果值就
                是返回Promise对象的值
            */ 
            return new Promise((resolve, reject)=>{
                // resolve("success")
                reject("err")
            })
        },reason=>{
        });
        console.log(result)
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    2.10.5 promise 如何串连多个操作任务?

    promise 如何串连多个操作任务?

    (1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用

    (2) 通过 then 的链式调用串连多个同步/异步任务

         <script>  
        let p = new Promise((resolve, reject) => {
            resolve("ok");
        })
        p.then(value=>{
            return new Promise((resolve, reject)=>{
                resolve("success")
            })
        }).then(value=>{
            console.log(value);
        }).then(value=>{
            console.log(value);
        });
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    2.10.6 promise 异常传透?

    promise 异常传透?

    (1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,

    (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

    	<script>       
	let p = new Promise((resolve, reject) => {
            resolve("ok");
            // reject("err")
        })
        p.then(value=>{
            return new Promise((resolve, reject)=>{
                resolve("success")
            })
        }).then(value=>{
            console.log(value);
        }).then(value=>{
            console.log(value);
        }).catch(reason=>{
            console.warn(reason)
        });
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    2.10.7 如何中断 promise 链?

    中断 promise 链?

    (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数

    (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

            let p = new Promise((resolve, reject) => {
            resolve("ok");
            // reject("err")
        })
        p.then(value=>{
            // 返回一个pendding状态的Promise，后续的then就都不会执行了
            return new Promise(()=>{})
        }).then(value=>{
            console.log(value);
        });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
  • 相关阅读:
    Navicat运行sql文件导入数据库失败出错
    男孩姓岳取什么名字好听
    文字处理控件TX Text Control迎来2022年第一版重大更新x30版本，一起来看看都有哪些特色功能吧
    链式编程 ( Java 8新特性 )
    CARLA编译问题 总结
    【Node.js】-闲聊：前端框架发展史
    Gnomon绑定基础（约束 IK 节点）
    Redux系列实现异步请求
    安全基础 --- nodejs沙箱逃逸
    Android12 展锐sl8541平台USB转串口（pl2303、ch343）以及APP访问权限
  • 原文地址：https://blog.csdn.net/cjhxydream/article/details/126005542