Promise其实也不难

news2024/11/27 4:18:09

 难点图解:then()方法

a01d447934ca4ffda2be39503b3a53ed.png

ES6学习网站:ES6 入门教程

解决:回调地狱(回调函数中嵌套回调)

两个特点:

(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

创建 Promise

你可以使用 new Promise() 构造函数来创建一个 Promise。它接受一个带有 resolvereject 两个参数的函数,这个函数会在异步操作完成(成功或失败)时被调用。

let myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    let success = true;
    if (success) {
      resolve("操作成功!"); // 成功时调用 resolve,状态fulfill且改变当前promise对象的结果
    } else {
      reject("操作失败!"); // 失败时调用 reject
    }
  }, 2000); // 模拟2秒延迟
});

  Promise原型的方法

then()

p.then(value)=>{console.log('value')},成功调用时执行,resolve()类似声明,将形参传给then()方法

在then()方法的参数函数中,通过形参使用promise对象的结果

如果promise的状态不改变,then()里的方法不会执行

使用return会将当前promise实例的状态改成fulfilled,return返回值将作为形参传给下一个then()

如果当前then()中代码出错,会将promise实例的状态改成rejected
53b4f135c03e44deb2c486e89051026d.png

3ed262dd936c49878cb587cb1ea2499a.png

catch()

catch(),失败调用时执行

何时触发?reject()或者Promise执行体中有错

处理 Promise

使用 then() 方法来处理 Promise 对象的成功完成情况,并使用 catch() 方法来处理失败情况。

myPromise.then((message) => {
  console.log("成功:", message); // Promise 被 resolve 时执行
}).catch((error) => {
  console.error("错误:", error); // Promise 被 reject 时执行
});

 上边说到Promise是一个构造函数,new之后等于说调用了构造函数,构造函数中传的参数是一个函数,这个函数内的两个参数分别又是两个函数(reslovereject)

Promise 链 

Promise 可以通过链式调用进一步简化处理多个异步操作的代码。在 then() 方法中返回一个新的 Promise对象状态为pending,可以使得链式调用变得更加清晰。

// 假设有一个函数 fetchUserData 返回一个 Promise,用于获取用户数据
fetchUserData()
  .then((userData) => {
    // 处理获取到的用户数据
    return fetchUserPosts(userData.userId); // 返回另一个 Promise
  })
  .then((userPosts) => {
    // 处理获取到的用户发帖数据
  })
  .catch((error) => {
    console.error("处理过程中出现错误:", error);
  });

 Promise.all 

Promise.all() 用于同时处理多个 Promise,并在所有 Promise 都成功时返回一个包含所有结果的 Promise,但只要有一个 Promise 失败,它就会立即返回失败

let promise1 = someAsyncOperation();
let promise2 = anotherAsyncOperation();

Promise.all([promise1, promise2])
  .then((results) => {
    // results 包含了两个 Promise 的结果
  })
  .catch((error) => {
    // 处理失败情况
  });

Promise.race

 Promise.race() 用于竞争多个 Promise,返回一个新的 Promise,其结果由最先完成的 Promise 决定

let promise1 = fetchUserData();
let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("操作超时!");
  }, 500); // 模拟超时操作
});

Promise.race([promise1, promise2])
  .then((result) => {
    // 处理最先完成的 Promise 的结果
  })
  .catch((error) => {
    // 处理失败情况,可能是超时或其他原因
  });

 

 

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

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

相关文章

Linux常见指令总结

ls:显示当前目录下文件列表 常用的命令行参数: -l 显示更多的文件属性 -a 显示所有的文件/目录(包括隐藏的) -d 只显示目录 ps:参数可以叠加使用。 例如:ls -la 显示所有文件…

力扣刷题Days16(js)-67二进制求和

目录 1,题目 2,代码 2.1转换进制数 2.2模拟加法 3,学习与总结 Math.floor() 模拟加法思路回顾 重点复习巩固 模拟加法的思路和学习位运算; 今天没精力了,先休息 1,题目 给你两个二进制字符串 a 和 b ,以二进制…

2m高分辨率土地利用分类矢量数据/植被类型分布数据

土地利用数据是在根据影像光谱特征,结合野外实测资料,同时参照有关地理图件,对地物的几何形状,颜色特征、纹理特征和空间分布情况进行分析,建立统一解译标志的基础之上,依据多源卫星遥感信息,结…

【Echarts】曲线图上方显示数字以及自定义值,标题和副标题居中,鼠标上显示信息以及自定义信息

欢迎来到《小5讲堂》 大家好,我是全栈小5。 这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解, 特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点的理解和掌握…

前端精准测试调用链路分析

精准测试在评估需求的测试范围时,需要评估一下代码的影响范围,这个范围有两部分:一是需求直接修改的代码;二是修改代码影响到的功能模块。代码影响到的功能一般是通过调用链路分析来实现的,java和kotlin代码可以由java…

小白必看,靠这几步写一份简单的产品说明书!

我们都知道,无论是新产品发布,还是老产品的推广,产品说明书都扮演着至关重要的角色。产品说明书可以帮助用户正确、高效地使用产品,也是传递企业发展理念、展示企业形象的有效途径。但作为一个小白,怎样才能写一份简单…

JSONObject在Android Main方法中无法实例化问题

目录 前言一、Main(非安卓环境)方法下运行二、安卓坏境下运行三、why? 前言 原生的json,即org.json.JSONObject; 在Android Studio中的Main方法里运行报错,但在安卓程序运行过程正常 一、Main(非安卓环境)方法下运行 static void test() {try {// 创建一个 JSON …

动态类型是什么?——跟老吕学Python编程

动态类型是什么?——跟老吕学Python编程 前言动态编程语言动态编程语言特点:动态编程语言的优点:动态编程语言的缺点: 静态编程语言静态编程语言特点:静态编程语言的优点:静态编程语言的缺点: 总…

【Vue3】什么是路由?Vue中的路由基本切换~

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

Linux操作系统-07-Linux安装应用

一、使用rpm安装应用(不推荐) 先下载到本地,以.rpm文件名结尾,下载完成后,再安装 rpm -qa | grep mysql #查询当前系统是否有下载过mysql包 先上传mysql的rpm安装包到linux的opt目录 安装 rpm -ivh …

云游戏发行是什么?云游戏发行的演进历程

云游戏发行是一系列基于云游戏技术的游戏发行策略或行为,融合云试玩、云微端、可玩广告、跨端移植等技术,从而在传统游戏发行生态的基础上实现更为卓越的发行效果。 云游戏发行出现的原因 近年来,游戏市场出现负增长。其原因一方面在于游戏版…

删除数据表

oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 删除数据表属于数据库对象的操作 drop table 表名称; 删除 emp30 表 SQL> drop table emp30;表已删除。 上面这个语句运行后,就会把数据表 emp30 删除 在…

AV1:编码块划分

​AV1是AOM于2018年发布的一代视频编码标准,相比于VP9其编码效率提升30%,相对于H.26X系列标准,AV1完全免去专利费可以自由使用。 AV1和其他视频编码标准类似,也采用基于块的编码架构。当编码器读进一帧图像,首先将其划…

Vue 3中的provide和inject:跨组件通信的新方式

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【linux】冯诺依曼体系与操作系统的理解

本篇文章是进程的预备知识,但也不仅仅是进程的预备知识, 也可以更好地帮助我们理解整个计算机体系。 目录 冯诺依曼体系结构:进一步理解操作系统: 冯诺依曼体系结构: 关于这张图先进行一下必要的解释: 输…

【清晰易懂】@Mapper注解和BaseMapper爱恨情仇

此问题的提出在于自己没有弄明白一个问题,就是Mapper注解有时候可以不加,有时候又需要加。 先说结论:Mapper注解和BaseMapper类在项目中起着相同的作用,都是为了实现数据库基本简单的CRUD,省去在xml文件中再去写&#…

java八股文复习----java集合,CAS---2024/03/12

1.java常见的集合类 2.List,Set,Map的区别 3.上述三个集合有哪些常用的方法 4.List,Set,Map哪几个是线程安全的? 5.ArrayList和LinkedList的区别 6.ArrayList和Vector的区别 7.ArrayList的扩容机制 8.HashMap集合 8.1数据结构 8.2哈希冲突的解决办法有哪…

Conmi遇到的坑——禅道的PCDN

好家伙,悄悄在后台吃了七十多G流量,我把你当兄弟宣传,你把我当PCDN吸。 还纳闷今天创建个VUE项目怎么提示D盘没空间,明明留了几十G,好家伙,一下子全吸干了。 删了两个,还有一个(已…

吴恩达深度学习笔记:神经网络的编程基础2.5-2.8

目录 第一门课:神经网络和深度学习 (Neural Networks and Deep Learning)第二周:神经网络的编程基础 (Basics of Neural Network programming)2.5 导数(Derivatives) 第一门课:神经网络和深度学习 (Neural Networks an…

PNG图片合成,带手机外观设置,可自定义金额等

PNG图片合成,带手机外观设置,可自定义金额等 软件界面成品显示免责声明 软件界面 成品显示 免责声明 若因使用代码与官方造成不必要的纠纷,本人盖不负责,存粹技术爱好,若侵犯贵公司的权益,请告知&#xff…