Promise详细版

news2024/11/24 15:51:15
  • promise基础原理到难点分析

  • 常见的Promise的方法解读

  • 扩展async和await深入分析

  • 逐步分析Promise底层逻辑代码

一、Promise基础

1.什么是promise

为了解决回调地狱:

 //2.设置点击事件
        btn.onclick = function() {
            //3.创建ajax实例化对象
            let xhr = new XMLHttpRequest();
            //console.log('ajax实例化对象刚刚被创建出来:',xhr.readState)
            //4.打开请求
            xhr.open('get', 'http://iwewiki.com');
            //console.log('ajax已经打开了请求',xhr.readState)
            //5.发送请求(send方法中发送的是请求体数据,只不过get请求是没有请求体的,而post请求有请求体)
            xhr.send()
                //6.客户端接收服务端中响应回来的结果数据
            xhr.onreadystatechange = function() {
                // 2:已经完成了请求的发送
                // 3:响应结果途中还没有完全相应结果完毕...ing
                //4:已经完成了响应完毕结果了
                //console.log('0',xhr.readState)
                //7.判断
                if (xhr.readyState === 4) {
                    //status:请求的状态码200-299之间
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //8.获取请求数据(JSON字符串=>json对象)
                        console.log(JSON.parse(xhr.responseText))
                    }
                }
            }
        }

2.回调地狱

promise构造函数

 

then方法的返回值的Promise实例化对象的状态取决于回调函数中的内容

  • 如果返回为非Promise实例化对象,则得到一个是成功的Promise。

  

  • 如果返回的是promise实例化对象,则Promise实例化对象的状态和结构值将直接影响result常量的状态和结果值。

  •  如果为抛出异常,则新的Promise实例化对象(result)为失败的Promise

3.链式调用.then

对数据库进行操作: 

 

 封装一个函数来读取文件:

4.Promise.all()

Promise下的all方法作用主要是针对于多个Promise的异步任务的处理

需要接收一个数组类型的参数

返回值:Promise对象,状态也是由数组中的每一个Promise对象的状态来决定的

当所有的Promise对象的状态都是成功的,最终的结果就是成功的Promise,结果值是由每一个Promise的结果值组成的数组。

当所有的Promise对象的状态但凡有一个是失败的,最终也是失败的Promise,结果值就是失败的这个Promise的结果值

 

5.Promise.allSettled() 

 

allSettled方法用来确定一组异步地操作是否都结束了(不管是成功还是失败),其中包含了fulfilled和rejected两种情况

   <script>
            function ajax(url) {
                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest()
                    xhr.open('get', url, true)
                    xhr.send()
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4) {
                            if (xhr.status >= 200 && xhr.status < 300) {
                                resolve(xhr.responseText)
                            } else {
                                reject(xhr.responseText)
                            }
                        }
                    }
                })
            }
            Promise.allSettled([ajax('地址1'), ajax('地址2')]).then(value => {
                let errorList = value.filter(item => item.status === 'rejected')
                console.log(errorList)
            }).catch(reason => {
                console.log(reason)
            })
        </script>

6.Promise.any()

有一个成功就是成功

Promise下的any方法,只要参数中有一个Promise实例化对象的状态为fulfilled,则整体结果就会为fulfilled。

如果所有Promise实力都是rejected,那么结果就是rejected

  <script>
            let p1 = new Promise((resolve, reject) => {
                resolve('ok');
            })
            let p2 = new Promise((resolve, reject) => {
                resolve('okk')
            })
            let result = Promise.any([p1, p2])
            console.log(result)
        </script>

 7.Promise.race()

 

Promise.race方法是需要传递一个参数,参数为数组,数组中的内容表示的是Promise实例化对象。

如果有最想到达状态的(pending来更改成fulfilled或者是rejected),不管是成功状态还是失败的状态,都将以这个对象的状态和结果值为准。

 8.Promise.reject()

 Promise.reject()方法将始终返回一个为失败的Promise对象,无论参数是否为Promise还是其他,最终都将返回失败的Promise

9.Promise.resolve()

 Promise下的resolve方法作用:将一个普通的值转换成Promise类型的数据.

分两种情况:

1.当resolve方法参数为非Promise对象,则返回的结果为成功的Promise对象

 

2.当resolve方法参数为Promise对象,则参数对象的状态和结果将直接影响最终resolve方法的返回值的那个对象的状态和结果

 10.catch

①then方法中是可以传入两个参数,当然也可以不传递,也可以只传递成功的回调函数

②也可以单独来使用catch来专门指定失败的回调函数

catch方法也有返回值,和then方法的返回值类似

catch方法也返回一个Promise实例化对象

情况1:如果失败回调函数中没有返回值,则得到一个成功的promise实例化对象,结构为undefined

情况2:如果失败回调函数中有返回值,但是这个返回值不是promise实例的情况下,则得到一个成功的promise实例化对象,结构为返回值数据

情况3:如果失败回电函数中有返回值,但是这个返回值是promise实例的情况下,则新的promise对象的状态和结果值完全取决于返回的Promise对象的状态以及结果值

 当然也可以和then方法结合使用

异常(错误)穿透

   当如果有多个需要执行的成功的回调,可以不每一次都写失败回调,可以一次性统一使用最后一次catch

   当Promise实例化对象的状态为rejected,则会一直向下穿透到catch方法

 11.finally

  finally是ES9中新增的特性,表示无论Promise对象变成了fulfilled还是rejected状态,最终都回执行finally方法的回调函数参数是不接受参数的。

12.终止promise链条

终止Promise链条主要就是为了返回 一个pending状态的Promise实例化对象。

 

13.async/await

使用async结合await的终极目标:就是同步的代码来完成异步的功能

1.async函数结合await表达式

   1.1async函数中不一定要完全结合await

    1.2有await的函数一定是async函数

2.await相当于then,可以直接拿到成功的Promise实例化对象的结果值

3.await一定要写在async函数之中,但是async函数之中可以没有await

4.如果await表达式后面是Promise实例化对象,则await返回的是Promise的成功的结果值

5.如果await表达式后面的其他值,则会直接将这个值作为await的返回值

 

 try....catch可以继续执行,并可以正常获取值

14.宏队列和微队列

JS中用来存储待执行回调函数的队列中包含了另个特定的队列

宏队列:用来保存执行的宏任务(回调),比如:定时器、DOM事件操作、ajax

微队列:用来保存执行的微任务(回调),比如:promise

JS执行的时候会区分两个队列

   --首先JS引擎会必须先将所有的同步代码都执行完

  ---每次准备取出第一个宏任务的执行之前,都需要将所有的微任务一个一个取出来执行

  ---顺序为   同--微--宏

二、手写Promise源码

Promise是一个构造函数,作用就是为了实例化对象。

语法:let 变量=new 构造函数名称();在堆内存中开辟一块空间,分配其大小以及设置其地址值0x100。

堆内存:主要存储的是引用数据类型的数据(数组、对象、函数)

栈内存:主要存储的是基本数据类型以及引用数据类型的地址值。

(一个函数如果作为另外一个方法的实际参数那么这么函数一定是回调函数)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/849983.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RocketMQ Learning(一)

目录 一、RocketMQ 0、RocketMQ的产品发展 1、RocketMQ安装 1.1、windows下的安装 注意事项 1.2、Linux下的安装 1.3、源码的安装 1.4、控制台 2、消息发送方式 2.1、发送同步消息 2.2、发送异步消息 2.3、单向发送 3、消息消费方式 3.1、负载均衡模式&#xff0…

生活小妙招之UE custom Decal

因为这几年大部分时间都在搞美术&#xff0c;所以博客相关的可能会鸽的比较多&#xff0c;阿巴阿巴 https://twitter.com/Tuatara_Games/status/1674034744084905986 之前正好看到一个贴花相关的小技巧&#xff0c;正好做一个记录&#xff0c;也在这个的基础上做一些小的拓展…

子集——力扣78

文章目录 题目描述法一 迭代法实现子集枚举题目描述 法一 迭代法实现子集枚举 class Solution {public:vector<int> t;vector<vector<

【C++基础】友元总结一些坑

友元类 友元类&#xff08;Friend Class&#xff09;是一种在C中用于实现类之间访问权限的特殊机制。通过友元类&#xff0c;一个类可以允许另一个类访问其私有成员&#xff0c;甚至可以使另一个类成为其友元&#xff0c;使其能够访问所有成员&#xff0c;包括私有成员。这种机…

[HDLBits] Exams/m2014 q4f

Implement the following circuit: module top_module (input in1,input in2,output out);assign out (!in2)&in1; endmodule

gma 2 教程(二)数据操作:5. 多维科学数据

多维科学数据定义 如下图所示&#xff0c;gma将多维栅格定义为N&#xff08;>1&#xff09;个普通栅格数据集&#xff08;DataSet&#xff09;1组&#xff08;记录多维数据信息的&#xff09;元数据组成的多数据集&#xff08;MultiDataSets&#xff09;。   注&#xff1…

Leetcode.2146 价格范围内最高排名的 K 样物品

题目链接 Leetcode.2146 价格范围内最高排名的 K 样物品 rating : 1837 题目描述 给你一个下标从 0 0 0 开始的二维整数数组 g r i d grid grid &#xff0c;它的大小为 m x n &#xff0c;表示一个商店中物品的分布图。数组中的整数含义为&#xff1a; 0 表示无法穿越的一…

伪原创小发猫怎么样【php源码】

大家好&#xff0c;小编为大家解答初学者自学python哪本书好的问题。很多人还不知道自学python需要什么基础&#xff0c;现在让我们一起来看看吧&#xff01; 火车头采集ai伪原创插件截图&#xff1a; 目前python可以说是一门非常火爆的编程语言&#xff0c;应用范围也非常的广…

TCP三次握手、四次握手过程,以及原因分析

TCP的三次握手和四次挥手实质就是TCP通信的连接和断开。 三次握手&#xff1a;为了对每次发送的数据量进行跟踪与协商&#xff0c;确保数据段的发送和接收同步&#xff0c;根据所接收到的数据量而确认数据发送、接收完毕后何时撤消联系&#xff0c;并建立虚连接。 四次挥手&…

vs code remote ssh: Resolver error: Error: Got bad result from install script

今天像往常一样&#xff0c;打开 windows 11&#xff0c;使用 vs code 远程连接服务器 ubuntu 20&#xff0c;但是遇到了一个错误&#xff1a;Resolver error: Error: Got bad result from install script。 ok&#xff01;&#xff01;&#xff01;开始 Bing &#xff01;&…

.Net C# 免费PDF合成软件

最近用到pdf合成&#xff0c;发现各种软件均收费啊&#xff0c;这个技术非常简单&#xff0c;别人写好的库一大把&#xff0c;这里用到了PDFsharp&#xff0c;项目地址Home of PDFsharp and MigraDoc Foundation 软件下载地址 https://download.csdn.net/download/g313105910…

OBD针脚定义参考

OBD定义的一种标准的参考&#xff0c;不同的车场有不同的定义&#xff0c;貌似没有统一。 在某宝上看到的ODB转db9的不同的线序&#xff1a; 1&#xff09;1/2/3/6几个针脚都是一样的&#xff0c;分别上下针脚对应。 2&#xff09;其中一种4/5/7/8也是上下对应的&#xff1b;另…

检验代码生成器完成版

写维护页面重复逻辑写烦了&#xff0c;连页面的增、删、改、查、弹窗等代码都不行手写了&#xff0c;为此做成代码生成器成型版1.0.干到10点。。。 代码&#xff1a; Class Demo.CodeGener Extends %RegisteredObject {/// 生成操作表相关的代码&#xff0c;包括M、C#调用代码…

有效管理IT问题的5个原则

问题管理就是发现未知的、隐藏的问题&#xff0c;这是根本原因&#xff0c; 这是您 IT 帮助台无穷无尽的工单来源。当您实施有效的 问题管理&#xff0c;您的 IT 团队可以超越消防模式&#xff0c;专注于战略 IT 目标。以下是可以帮助您实现一流问题管理的五个原则&#xff1a;…

远程运维大批量IT设备?向日葵批量部署、分组授权与安全功能解析

数字化转型的不断推进&#xff0c;给予了企业全方位的赋能&#xff0c;但任何发展都伴随着成本与代价&#xff0c;比如在数字化转型过程中企业内部办公与外部业务所需的不断增加的IT设备数量&#xff0c;就为日常的运维工作提出了更大的挑战。 针对企业面对海量IT设备时的运维…

多态总结

什么是多态&#xff1f; 所谓多态&#xff0c;就是同一个操作&#xff0c;作用在了不同的对象上&#xff0c;就会有不同的解释&#xff0c;进而产生不同的执行结果。使用时&#xff0c;是采用父类指针指向子类对象的方法。其中&#xff0c;重载和重写是常见的实现多态的手段。…

【MySQL】基础知识(一)

MySQL基础知识&#xff08;一&#xff09; 文章目录 MySQL基础知识&#xff08;一&#xff09;00 MySQL安装01 数据库介绍1.1 什么是数据库1.2数据库分类 02 SQL分类03 数据库操作3.1显示数据库3.2创建数据库3.3选中数据库3.4删除数据库 04 常用数据类型4.1数值类型4.2字符串类…

LeetCode 0024. 两两交换链表中的节点:粗暴易懂的方法(几个临时变量)

【LetMeFly】24.两两交换链表中的节点&#xff1a;粗暴易懂的方法&#xff08;几个临时变量&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/swap-nodes-in-pairs/ 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点…

安路FPGA的赋值报错——移位处理,加括号

authordaisy.skye的博客_CSDN博客-嵌入式,Qt,Linux领域博主 在使用移位符号用来当作除以号使用时&#xff0c;发现如下问题 其中 cnt_8K 为偶数和奇数时输出的数据不一样 reg [10:0] cnt_8K; reg [10:0] ram1_addra; always(posedge clk_16M) begin if(ram_out_flag )begin if(…

2023年新手如何学剪辑视频 想学视频剪辑如何入门

随着短视频、vlog等媒体形式的兴起&#xff0c;视频剪辑已经成为了热门技能。甚至有人说&#xff0c;不会修图可以&#xff0c;但不能不会剪视频。实际上&#xff0c;随着各种智能软件的发展&#xff0c;视频剪辑已经变得越来越简单。接下来&#xff0c;一起来看看新手如何学剪…