前端 js 之 promise( 第一版 23.11.18) 09

感觉自己好笨,知识点表达的不够明晰,也正是因为如此,说明有很大的进步空间,更要在此努力!

文章目录

  • 前言
  • 一、作用
  • 二、使用步骤
  • 三、promise 类
  • 四、promise 方法


前言

每一个新技术的出现,都是解决原有技术上的某一个痛点,直入主题,我们今天来看下promise的作用


一、作用

        假设我们用定时器模拟一个接口,假设url是争取的我们就表示请求成功,否则失败,大概2s后会告诉我们接口请求的结果。

  1. 我们调用一个函数,这个函数中发送网络请求(我们可以用定时器来模拟);
  2. 如果发送网络请求成功了,那么告知调用者发送成功,并且将相关数据返回过去;
  3. 如果发送网络请求失败了,那么告知调用者发送失败,并且告知错误信息;
	function requestData(){setTimeout((()=>{if(url==='dkjfdkf'){successCallback('返回成功的回调')}else{errorCallback('返回失败的回调')}})2000)},

假设可能判断是否成功的条件有以下:

 function requestData(){setTimeout((()=>{if(url==='dkjfdkf'){let result1 = successCallback('返回成功的结果')if(result1==true){let result2 = successCallback('返回成功的结果')if(result2 ==true){successCallback('返回成功的回调')}}}else{errorCallback('返回失败的回调')}})2000)
},
  1. 因为异步操作什么时候返回结果是不可控的,如果要按顺序来请求,就只能将这些操作嵌套起来,如果回调函数嵌套过多,中间有一个回调函数发生错误可能结果就错了,而且很难排查是哪个回调函数发生了错误,代码就很难维护而且难以阅读。当我们需要处理多个异步操作时,我们可以使用promise,
  • promise 异步编成的一种解决方式,它将异步操作封装一个promise 类,通过链式调用的方式来处理多个异步操作,避免了回调地狱问题

  • 还有一种方式,async/await ,可以让异步代码看起来像同步代码,它是基于promise实现的

  • 回调地狱是指在异步编程中,回调函数嵌套过多,导致代码难以维护和阅读的情况。

二、使用步骤

  1. Promise是一个类,通过 new 创建 一个Promise对象,会传入一个回调函数,这个回调函数有两个参数,resolve和reject , 这个回调函数会立即执行,调用resolve回调会执行.then方法,调用reject回调时,会执行Promise对象的catch方法
	const pro = new Promise((resolve,reject)=>{if(网络请求成功){  resolve('成功')}else{reject('失败')}})pro.then(res=>{//   执行resolve})pro.catch(res=>{//   执行resolve})
  1. 上面Promise使用过程,我们可以将它划分成三个状态:
    待定(pending): 初始状态,既没有被兑现,也没有被拒绝;new promise 的回调函数里
    已兑现(fulfilled): 意味着操作成功完成; resolve回调
    已拒绝(rejected): 意味着操作失败;reject 回调

  2. 一旦状态被确定下来,Promise的状态会被 锁死,该Promise的状态是不可更改的

  3. 如果resolve传入一个普通的值或者对象,那么这个值会作为then回调的参数;如果resolve中传入的是另外一个Promise,那么这个新Promise会决定原Promise的状态:

三、promise 类

我们都知道,promise 是通过new的方式创建出来的,那说明promise是一个类,

console.log(Promise.prototype)   // 打印不出来,因为内部方法都是不可枚举
console.log(Object.getOwnPropertyDescriptor(Promise.prototype))  // 发现then catch all 

在这里插入图片描述

        我们模拟下promise 的 then方法,promise是一个类,默认一进来就会走constructor里的方法,接收一个回调函数,并是立即执行的回调函数, 回调函数里两个函数,如果使用then 的方法,就会把then方法传进来的回调函数临时保存起来,promise内部就是就是各种回调函数各种调

class Promise(){constructor(executor){const resolve=()=>{this.callback()}const reject=()=>{}executor(resolve,reject)}then(callback){this.callback=callback}
}const promise = new Promise((resolve,reject)=>{})  // promise里的箭头函数就相当于executor

四、promise 方法

  1. then 成功的回调
  2. catch 失败的回调
  3. finally 都会走的回调
  4. all 传入多个promise , promise的状态都为fulfilled 才会走
  5. allselttled 多个promise都有结果才走
  6. race 有一个成功就会走的回调

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

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

相关文章

SQL 文本函数

前言 SQL文本函数是SQL语言中非常有用的一类函数,它们用于处理和操作字符串数据。在实际应用中,我们经常需要对数据库中的文本数据进行各种操作,比如提取子串、替换子串、拼接字符串等等。而SQL文本函数可以帮助我们轻松地完成这些任务&#…

Python (十) 元组

元组 元组与列表类似,不同之处在于元组的元素不能修改。 元组使用小括号 ( ),列表使用方括号 [ ]。 元组创建只需要在括号中添加元素,并使用逗号隔开即可。 访问 tup1 (hello,Java,Python,123,456) print(type(tup1)) print(tup1[1])#输出 …

Sam Altman 被罢免细节曝光,投资 100+ 公司或成「话柄」?

2022 年 11 月,ChatGPT 发布掀起 AI 狂潮。时隔 1 年,2023 年 11 月,ChatGPT 之父、Sam Altman 的一项人事巨变,再次掀起了一场 AI 界的风暴,只是这次并不是技术革命,而是 OpenAI 巨头换帅——Sam Altman 被…

【解疑】ZIP压缩包的密码可以取消吗?

ZIP是工作中经常用到的文件压缩格式,它可以将多个文件压缩成一个文件,便于传输和存储。有时候,为了保护文件的私密性,很多人还会在压缩文件的同时设置密码保护。那问题来了,要是后续不需要保护了,ZIP压缩包…

Swagger示例

对于项目完成后不用写文档,好处还是蛮大的 不需要关注项目其他 只关注接口与实体类即可 SpringBoot项目 依赖 <!--Swagger依赖--> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version…

docker 安装mongodb 实现 数据,日志,配置文件外挂

docker 安装mongodb 实现数据&#xff0c;日志&#xff0c;配置文件外挂 1 背景 最近开发了一个评论系统之前用mysql来存储数据&#xff0c;但是考虑到后期业务增大访问量也会增大&#xff0c;为了兼容这种高并发的场景&#xff0c;因此经过多方面的考虑&#xff0c;我们最终…

一文搞懂设计模式之代理模式

大家好&#xff0c;我是晴天&#xff0c;本周我们又见面了。本周有点发烧感冒&#xff0c;更文有点慢了&#xff0c;请大家见谅。言归正传&#xff0c;本周我们继续一起学习一文搞懂设计模式系列文章之代理模式。 什么是代理模式 我们先来看看 GoF 对代理模式的定义&#xff1…

LaTeX 数学公式常见问题及解决方案

本文汇总了博主在使用 LaTeX 写文档过程中遇到的所有数学公式常见问题及对应的 LaTeX 解决方案 持续更新... 目录 1. 连等式2. 公式重新开始编号2.1 图片/表格重新编号 1. 连等式 在数学公式推导过程中常常会遇到如 Figure 1 所示的连等式&#xff0c;一般需要保证等号或者不等…

英伟达AI布局的新动向:H200 GPU开启生成式AI的新纪元

英伟达Nvidia是全球领先的AI计算平台和GPU制造商&#xff0c;近年来一直在不断推出创新的AI产品和解决方案&#xff0c;为各行各业的AI应用提供强大的支持。 最近&#xff0c;英伟达在GTC 2023大会上发布了一款专为训练和部署生成式AI模型的图形处理单元&#xff08;GPU&#…

无需公网IP、简单3步,直连远程NAS实现高速访问

面对NAS远程访问难题 蒲公英旁路组网盒子X1 一招搞定&#xff01; 无需公网IP、无需设置原有路由 简单3步&#xff0c;即可实现异地组网 更有点对点直连&#xff08;P2P&#xff09;模式 不限流量、不限速 传输速率取决于实际网络带宽 贝锐蒲公英X1&#xff0c;无需改变原…

springboot项目中没有识别到yml文件解决办法

springboot项目中没有识别到yml文件解决办法 ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传] 1、这个意思就是没有配置数据库的数据源路径。所以需要配置数据源&#xff0c;比如mysql的驱动和路径。检查是否在properties或者yml文件中是否已经配置好。…