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>

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>Document</title>
</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>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>

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>

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>

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>

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>

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

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

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

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

     <script>  
        let p = new Promise((resolve, reject) => {
            resolve("ok");
        })
        p.then(value=>{
           // 这句执行完之后会返回一个成功的promise,结果为success
            return new Promise((resolve, reject)=>{
                resolve("success")
            })
        }).then(value=>{
            // 这个函数执行完之后也会返回一个成功的promise,因为没有返回值,所以结果为undefined
            console.log(value);
        }).then(value=>{
           // 这个函数执行完之后也会返回一个成功的promise,因为没有返回值,所以结果为undefined
            console.log(value);
        });
    </script>

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>

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);
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值