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

已于 2022-11-28 21:30:01 修改
阅读量503 收藏
点赞数
分类专栏： # Promise 文章标签： javascript 原型模式 前端
于 2022-07-26 23:52:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjhxydream/article/details/126005542
版权

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);
        });
若水cjj
关注
专栏目录
Promise从入门到精通 （第1章 Promise的介绍和基本使用）
cjhxydream的博客
07-26 525
Promise从入门到精通 （第一章 Promise的介绍和基本使用）
promise 从入门到精通1（准备篇）
天天的博客
03-15 309
从这一篇，我将一步步带大家写出一个promise，大家不用着急，我这博客是边写，边做的笔记，所以有可能啰嗦， 也会出现很多错误，不过我们不着急，一点点解决，总会全部搞定的！ 在学习promise 之前呢，我希望你有es6基础知识，什么解构语法，let const 都要会用，这起码的吧！ —————————————————————————————————————————————————————...
Promise入门到精通
weixin_45210011的博客
06-21 110
尚硅谷视频笔记
Promise 详解（原理篇）
最新发布
When you can't win by being better, you can win by being different.
07-20 2154
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
Promise入门到精通（1.5w字详解）
随便写写
07-27 367
Promise的详解和例子（适合小白和有一定基础的人群），让你再也不害怕关于Promise的问题
Promise学习
山鬼谣弋痕夕的博客
07-21 298
在JavaScript的世界中，所有代码都是单线程执行的。 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现： function callback(){ console.log('Do something'); } console.log('before setTimeout()'); setTimeout(callback...
JavaScript从入门到精通（第2版）PPT.7z
07-14
通过学习“JavaScript从入门到精通（第2版）PPT”，你将全面了解JavaScript的基础和进阶知识，具备开发复杂Web应用的能力。这份资料涵盖了从基础知识到实践应用的方方面面，是初学者和进阶者理想的自学资源。
ReactV 15.5.0 从入门到精通第二章 React语法基础Promi
11-06
ReactV 15.5.0 从入门到精通第二章 React语法基础Promise实例
JavaScript从入门到精通（第2版）书籍和源代码实例
12-04
本书《JavaScript从入门到精通（第2版）》旨在帮助初学者和有经验的开发者深入理解和掌握这门语言，从而提升技能水平。通过阅读本书和实践其中的源代码实例，读者将能够全面了解JavaScript的核心概念和技术。 首先...
Promise 学习
技术小屋
03-17 268
Promise 前言 之前写 JavaScript 异步处理时，一般都会用回调函数（callback）方式来处理异步的结果，例如： function f (callback) { setTimeout(() =&gt; { // setTimeout 模拟耗时任务 const result = 'f'; callback(result) }, 1...
Promise （学习笔记）
qq_54422936的博客
10-13 395
Promise 学习笔记
Promise教程
qq_60440599的博客
10-07 262
Promise教程
Promise入门学习
十九万里的博客
06-22 235
1、promise概述 Promise是ES6中原生的一个方法 代表着未来要发生的某件事情，在javascript中来说就是异步操作，所以在js中promise就是异步操作常见的一种方法， 异步操作常见方法： 1、callback回调函数 2、事件监听 3、promise 4、发布/订阅模式 5、async/await 6、generator链式调用 这里我们主要学习Promise Promise主要的优点在于能把异步操作通过同步操作的流程表示出来，避免了异步的嵌套回调。产生回调地狱。 2、promis
Promise教程（一）
qq_50680212的博客
06-21 278
Promise是什么 1. 抽象表达： - Promise是一门新的技术（ES6提出的） - Promise是JS中异步编程的新方案（旧方案是谁？---纯回调） 2. 具体表达： - 从语法上来说：Promise是一个内置构造函数，是程序员自己new调用的 - 从功能上来说：Promise的实例对象可以用来封装一个异步操作，并可以获得其成功/失败的值......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值