JS中的Promise用法大全

ops/2024/12/16 22:44:55/

目录

  • 一、相关概念介绍
    • 1.什么是Promise
    • 2.Promise状态
    • 3.创建Promise
    • 4.then()方法
    • 5.catch方法
    • 6.链式调用
    • 7.异步编程
  • 二、使用
    • 1.构造Promise
    • 2.executor 函数
    • 3.then() 方法
    • 4.then() 方法返回的Promise的状态
  • 三、Async/Await语法糖
  • 四、Promise应用场景
  • 五、总结

一、相关概念介绍

1.什么是Promise

在JavaScript中,Promise是一个用于进行异步编程的构造函数。它是ES6中引入的一个重要概念,用于处理异步操作。Promise是JavaScript中用于处理异步操作的对象,它代表了一个尚未完成但最终会完成或失败的操作。Promise的目的是以更优雅的方式书写复杂的异步任务,从而提高代码的可读性和可维护性。

2.Promise状态

Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成)和Rejected(已失败)。

  • 当Promise被创建后,它的状态是Pending。
  • 当操作成功完成,它的状态变成fulfilled,并传递一个值作为成功的结果。此时,then中的用于处理成功操作的回调会被执行。
  • 当操作失败,它的状态变成rejected,并传递失败的原因。此时,then中的用于处理失败操作的回调会被执行。

3.创建Promise

通过构造函数创建一个Promise对象,构造函数接收一个函数作为参数,该函数的两个参数分别是resolve和reject。resolve函数的作用是将Promise对象的状态从Pending变为Resolved,在then方法中传入的回调函数会被调用。reject函数的作用是将Promise对象的状态从Pending变为Rejected,在catch方法中传入的回调函数会被调用。

4.then()方法

  • Promise对象身上有then方法,可用来指定回调,对成功和失败的结果进行处理。
  • then() 接受两个参数,一个处理成功状态的回调,另一个是处理失败状态的回调。
  • then()返回的是一个Promise对象,支持链式调用。
  • then()方法中不能改变Promise的状态。

5.catch方法

Promise对象的catch方法用于捕获链中的任何一步的错误。

6.链式调用

  • then()和catch都会返回Promise对象,所以可以使用链式调用来处理多个异步操作,解决了多层嵌套的问题。
  • 可以解决异步编程回调地狱的问题。

7.异步编程

在JS中,Promise是一个代表了异步操作最终完成或失败,及其结果值的对象。它允许开发人员为异步操作的成功和失败情况注册处理程序,极大地简化了异步编程的复杂性。

二、使用

1.构造Promise

javascript">new Promise(function(resolve,rejecrt)
{//异步操作//.......//操作成功resolve("success");
}).then(value=>{console.log(value);
});

Promise构造函数接受一个函数类型的参数executor,我们称executor为执行器函数。

2.executor 函数

  • executor 函数在 Promise 构造函数中是作为一个参数被传入,并在 Promise 对象被创建后立即执行。 executor可以是用function申明的函数,也可以是箭头函数。
  • executor 函数带有 resolvereject 两个函数类型的参数 。当调用任意一个参数时,会改变 Promise 对象的状态。
  • 异步操作成功时,调用 resolve 函数, Promise 对象的状态就会由 pending 变为 fulfilled(已兑现),并返回 executor 函数中 resolve 的参数(成功的值)。
  • 异步操作失败时,调用 reject 函数, Promise 对象的状态就会由 pending 变为rejected(已拒绝),并返回 executor 函数中 reject 的参数(失败的原因)。
  • executor 中抛出的任何错误都会导致 Promise 被拒绝,并且返回值将被忽略。

3.then() 方法

javascript">const p1= new Promise(function(resolve,rejecrt)
{setTimeout(() => {var currentSecond = new Date().getSeconds();//获取当前时间的秒数,若为偶数则操作成功,否则为操作失败if(currentSecond%2===0){//操作成功resolve(currentSecond);//p1的状态转变成fulfilledconsole.log(p1);}else{rejecrt(new Error(currentSecond));//操作失败,p1的状态转变成rejectedconsole.log(p1);}}, 1000);})
p1.then(value=>{console.log("success: "+value);//处理操作成功的情况})
.catch(error=>{console.error(error);//处理失败的情况
});

运行结果
由运行结果可知:

  • reject函数用于将Promise状态转成rejected状态,并传递一个原因作为失败的结果。
  • resolve函数用于将Promise状态转成fulfilled状态,并传递一个值作为成功的结果。
  • Promise状态转成fulfilled时,执行then方法。当状态转成rejected时,被catch捕获。

4.then() 方法返回的Promise的状态

下面的3段代码将讨论:根据回调函数返回值的不同类型,确定then() 方法返回的Promise对象的状态值。
第1种情况:promise操作成功,回调函数返回非Promise对象

javascript">const promise= new Promise(function(resolve,rejecrt)
{//操作成功resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//接受promise成功的回调return '345678'},reason=>{})
console.log(p1);

操作成功,回调返回字符串
第二种情况:promise操作失败,回调函数返回非Promise对象

javascript">const promise= new Promise(function(resolve,rejecrt)
{//失败成功rejecrt('fail');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{},reason=>{return '123456'})
console.log(p1);

操作失败,回调返回字符串
promise回调函数抛出异常

javascript">const promise= new Promise(function(resolve,rejecrt)
{//操作成功resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//在回调函数中抛出异常throw '出错了'},reason=>{})
console.log(p1);

在这里插入图片描述
promise回调函数返回Promise对象

javascript">const promise= new Promise(function(resolve,rejecrt)
{//操作成功resolve('success');//p1的状态转变成fulfilled
})
const p1=promise.then(value=>{//回调函数返回Promise对象return new Promise((resolve,rejecrt)=>{resolve('成功了');})},reason=>{})
console.log(p1);

在这里插入图片描述
根据上面的四种情况,我们可以得出结论如下:

  • 1)promise操作成功,回调函数返回非Promise对象,p1的状态是fulfilled
  • 2)promise操作失败,回调函数返回非Promise对象,p1的状态是fulfilled
  • 3)promise回调函数抛出异常,p1的状态是rejected
  • 4)回调函数的返回结果是promise对象,则p1的状态就取决于return返回的这个promise对象内部的状态,内部为resolve, 则p1状态为fulfilled,内部为reject,则p1状态为rejected

三、Async/Await语法糖

‌Async/Await是基于Promise的语法糖‌,使得异步代码的编写更加简洁和易于理解。使用async关键字声明异步函数,await关键字用于在函数中等待Promise的解析。await只能在async函数内部使用。

javascript">async function asyncFunction() {console.log("程序开始");const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve("两秒后,耗时的任务操作成功");}, 2000);});const result = await promise; // 等待promise解析console.log(result); // 输出: Resolved
}console.log(asyncFunction()); // 调用异步函数
console.log('程序结束')

在这里插入图片描述

  1. async 标记的函数是个Promise对象。
  2. 如果表达式是promise对象并且状态为成功,那么await将返回的是这个promise对象成功的值。
  3. 如果表达式是promise对象,并且它失败了,那么就要通过try,catch进行捕获错误,不捕获错误那么后面代码无法执行.

四、Promise应用场景

  1. 定时器:可以使用 Promise 来管理定时器操作,譬如延迟执行某个任务或定时轮询服务器。
  2. Ajax 请求:使用 Promise 可以更方便地管理 Ajax 请求。例如,在使用 Fetch API ,Axios或其他 Ajax 库时,可以将异步操作封装在 Promise 中,以便更好地处理成功和失败的情况 。
  3. 文件操作:在文件的读、写或上传等操作时,Promise 可以提供更清晰的代码结构和错误机制处理。

五、总结

Promise 是一种用于处理异步操作的 JavaScript 对象,它提供了一种更清晰、更可靠的方式来管理异步代码。以下是 Promise 的主要特点和优势的总结:

  1. 简化异步操作:Promise 可以帮助我们更轻松地处理异步操作,以及在操作完成后执行相应的逻辑。
  2. 链式调用:链式调用使得多个异步任务能够顺序执行,每个任务的输出可以作为下一个任务的输入。这种方式大大提高了代码的可读性和可维护性。与嵌套回调相比,链式调用避免了多层嵌套,使代码更为扁平和直观。
  3. 错误处理机制:如果链式调用中任意一个 Promise 被拒绝(rejected),后续的 then() 将会跳过,直接进入下一个 catch()。这是 Promise 链中独特的错误处理机制,确保开发者能够集中处理异步操作中的错误。
  4. 异步任务的顺序执行:当我们需要依次执行多个异步操作时,链式调用可以提供非常简洁的代码结构。
  5. 避免回调地狱::Promise 可以解决回调地狱问题,使代码结构更加清晰和易于理解。Promise.then返回的也是一个promise对象,因此可以进行链式调用。这也是promise可以解决异步编程回调地狱的原因。

http://www.ppmy.cn/ops/142483.html

相关文章

蓝桥杯刷题——day1

蓝桥杯刷题——day1 题目一题干题目解析代码 题目二题干题目解析代码 题目一 题干 给定一个字符串 s ,验证 s 是否是 回文串 ,只考虑字母和数字字符,可以忽略字母的大小写。本题中,将空字符串定义为有效的 回文串 。 题目链接&a…

【FFmpeg】FFmpeg 内存结构 ⑥ ( 搭建开发环境 | AVPacket 创建与释放代码分析 | AVPacket 内存使用注意事项 )

文章目录 一、搭建开发环境1、开发环境搭建参考2、项目搭建 二、AVPacket 创建与释放代码分析1、AVPacket 创建与释放代码2、Qt 单步调试方法3、单步调试 - 分析 AVPacket 创建与销毁代码 三、AVPacket 内存使用注意事项1、谨慎使用 av_init_packet 函数2、av_init_packet 函数…

Elasticsearch Java Api Client中DSL语句的查询方法汇总

说明:示例代码依赖的是co.elastic.clients:elasticsearch-java:8.16.1。 1、termQuery 方法 用途:用于精确匹配某个字段的完全相等的值。这在查询如文档的 ID、状态码等具有明确取值的字段时非常有用。参数说明: field:这是一个…

游戏引擎学习第45天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们刚刚开始研究运动方程,展示了如何处理当人物遇到障碍物时的情况。有一种版本是角色会从障碍物上反弹,而另一版本是角色会完全停下来。这种方式感觉不太自然,因为在游戏中,…

新能源汽车安全充电管理方案

摘要:近年来,随着国家碳达峰和碳中和目标的提出,国家节能减排政策实施力度的进一步加大大众的环保意识、环保理念进一步深入人心,同时根据国家战略安全需要,新能源汽车行业异军突起,发展迅猛。随着新能源汽车数量的不断…

Mac/Windows端长期破解myBase8方法(无需安装火绒)

提醒 不管哪个端,都需要先退出myBase。 Mac 进入用户根目录/Users/c0ny100,即下边是Macintosh HD > 用户 > [你的用户名]这个界面然后按ShiftCommond.,显示隐藏文件。找到.Mybase8.ini文件 打开.Mybase8.ini文件,删除Fir…

Unity 将数字1234转换为字母ABCD

需求如下: 数字1,转换后为:A 数字2,转换后为:B 数字3,转换后为:C 数字4,转换后为:D 数字123,转换后为:ABC C#实现代码如下: pri…

【超详细实战攻略】Jmeter逻辑控制器中if控制器、模块控制器、测试片段的使用方法

【超详细实战攻略】Jmeter逻辑控制器中if控制器、模块控制器、测试片段的使用方法 1 搭建测试对象1.1 禅道下载1.2 禅道安装1.3 运行禅道1.4 接口查看1.5 接口选择 2 Jmeter前置操作2.1 创建Jmeter线程组2.2 创建信息头管理器和请求默认值2.3 添加获取token接口2.4 添加监听器 …