Promise详细版

  • 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.mzph.cn/news/29507.shtml

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

相关文章

流量,日志分析

wireshark wireshark中有捕获过滤器和显示过滤器 常用的捕获过滤表达式&#xff1a; 常见的显示过滤表达式&#xff1a; 语法&#xff1a; 1.过滤IP&#xff0c;如来源IP或者目标IP等于某个IP 例子: ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107 或者 ip.addr eq 1…

DAY03_Spring—SpringAOPAOP切入点表达式AOP通知类型Spring事务管理

目录 一 AOP1 AOP简介问题导入1.1 AOP简介和作用1.2 AOP中的核心概念 2 AOP入门案例问题导入2.1 AOP入门案例思路分析2.2 AOP入门案例实现【第一步】导入aop相关坐标【第二步】定义dao接口与实现类【第三步】定义通知类&#xff0c;制作通知方法【第四步】定义切入点表达式、配…

(八)穿越多媒体奇境:探索Streamlit的图像、音频与视频魔法

文章目录 1 前言2 st.image&#xff1a;嵌入图像内容2.1 图像展示与描述2.2 调整图像尺寸2.3 使用本地文件或URL 3 st.audio&#xff1a;嵌入音频内容3.1 播放音频文件3.2 生成音频数据播放 4 st.video&#xff1a;嵌入视频内容4.1 播放视频文件4.2 嵌入在线视频 5 结语&#x…

MySQL面试1

Mysql的面试突击1 Mysql的体系结构是什么样子的&#xff08;查询语句怎么进行执行的&#xff09; mysql的架构&#xff1a;单进程多线程的架构模式 CLient -----> Server架构 Mysql的链接方式有没有性能优化的点 2个点 查询缓存(Query Cache) MySQL 内部自带了一个缓存模…

Spring Boot集成EasyExcel实现excel导入导出操作

文章目录 Spring Boot集成EasyExcel实现excel导入导出操作0 简要说明简单使用读操作excel源文件实体类监听器业务代码 写操作*实体类*excel示例业务代码根据参数指定列导出指定哪几列导出复杂头导出 关于数值型&#xff0c;日期型&#xff0c;浮点型数据解决方案实体类接收字符…

算法通过村第二关-链表黄金笔记|K个一组反转

文章目录 前言链表反转|K个一组翻转链表解题方法&#xff1a;头插法处理&#xff1a;穿针引线法处理&#xff1a; 总结 前言 提示&#xff1a;没有人天生就喜欢一种气味而讨厌另一种气味。文明的暗示而已。 链表反转|K个一组翻转链表 给你链表的头节点 head &#xff0c;每 k…

【css】textarea-通过resize:none 禁止拖动设置大小

使用 resize 属性可防止调整 textareas 的大小&#xff08;禁用右下角的“抓取器”&#xff09;&#xff1a; 没有设置resize:none 代码&#xff1a; <!DOCTYPE html> <html> <head> <style> textarea {width: 100%;height: 150px;padding: 12px 20p…

源码分析——HashMap(JDK1.8)源码+底层数据结构分析

文章目录 HashMap 简介底层数据结构分析JDK1.8之前JDK1.8之后 HashMap源码分析构造方法put方法get方法resize方法 HashMap常用方法测试 HashMap 简介 HashMap 主要用来存放键值对&#xff0c;它基于哈希表的Map接口实现&#xff0c;是常用的Java集合之一。 JDK1.8 之前 HashM…

HBase-写流程

写流程顺序正如API编写顺序&#xff0c;首先创建HBase的重量级连接 &#xff08;1&#xff09;读取本地缓存中的Meta表信息&#xff1b;&#xff08;第一次启动客户端为空&#xff09; &#xff08;2&#xff09;向ZK发起读取Meta表所在位置的请求&#xff1b; &#xff08;…

python实现简单的爬虫功能

前言 Python是一种广泛应用于爬虫的高级编程语言&#xff0c;它提供了许多强大的库和框架&#xff0c;可以轻松地创建自己的爬虫程序。在本文中&#xff0c;我们将介绍如何使用Python实现简单的爬虫功能&#xff0c;并提供相关的代码实例。 如何实现简单的爬虫 1. 导入必要的…

1、如何实现两台电脑之间数据相互读写

一、确保两台电脑在同一个局域网中&#xff0c;可以使用网线【动态配置】进行两台电脑互连。 二、静态配置: 将IP地址和网关设为192.168.0.1&#xff0c;目的是让这台电脑做另一台电脑的网关&#xff0c;子网掩码一点击会自动添加。第二台电脑同样打开设置&#xff0c;此处IP地…

DT昆虫绑定学习(没蒙皮)

SelectEdgeLoopSp; ConvertSelectionToVertices;selectType -ocm -alc false; selectType -ocm -polymeshVertex true; CreateCluster; 连接到物体 global proc matchTrns() { string $mtr[] ls -sl; if (size($mtr) < 2){ warning "MUST select 2 objects!"…

SQL分类及通用语法数据类型(超详细版)

一、SQL分类 SQL是结构化查询语言&#xff08;Structured Query Language&#xff09;的缩写。它是一种用于管理和操作关系型数据库系统的标准化语言。SQL分类如下&#xff1a; DDL: 数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库、表、字段&#xff09;DML:…

Docker学习(二十四)报错速查手册

目录 一、This error may indicate that the docker daemon is not running 报错docker login 报错截图&#xff1a;原因分析&#xff1a;解决方案&#xff1a; 二、Get "https://harbor.xxx.cn/v2/": EOF 报错docker login 报错截图&#xff1a;原因分析&#xff1a…

DARPA TC-engagement5数据集解析为json格式输出到本地

关于这个数据集的一些基本信息就不赘述了&#xff0c;参考我之前的博客。DARPA TC-engagement5数据集官方工具可视化 官方给的工具是将解析的数据存到elasticsearch的&#xff0c;但是数据集的解压增长率非常恐怖&#xff0c;对空间要求很高。因此针对这个问题&#xff0c;我对…

安全防御(3)

1.总结当堂NAT与双机热备原理&#xff0c;形成思维导图 2.完成课堂nat与双机热备试验 引用IDS是指入侵检测系统&#xff0c;它可以在网络中检测和防御入侵行为。IDS的签名是指根据已知入侵行为的特征制定的规则&#xff0c;用于检测和警告可能存在的入侵行为。签名过滤器可以根…

计算机网络 ARP协议 IP地址简述

ARP只能在一个链路或一段网络上使用

玩机搞机---安卓新机型payload.bin刷写救砖 无需专用线刷包

目前的新机型官方卡刷包解包后都是payload.bin分区格式的卡刷固件。而有个别一些机型没有线刷包&#xff0c;当这些机型出现系统问题的时候有以下几种方法参考救砖。遇到类似故障的朋友可以借鉴参考下. 其中的不足和相关的资源可以参考这两个博文。任何教程的目的只是拓展你的…

LVS—DR集群的搭建

目录 lvs-dr模式工作原理&#xff1a; 搭建结构&#xff1a; 1、RS&#xff1a; 1&#xff09;两台RS准备好httpd环境和测试文件 2&#xff09;添加虚拟IP&#xff08;vip&#xff09;、添加访问本地vip的静态路由 并抑制ARP 2、DS&#xff1a; 1&#xff09;安装ipvasadm…

【C++】C++回调函数基本用法(详细讲解)

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…