JS中的Promise用法大全

目录

  • 一、相关概念介绍
    • 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

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() 方法

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对象

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对象

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

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

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

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

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函数内部使用。

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.rhkb.cn/news/490547.html

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

相关文章

【新界面】基于卷积神经网络的垃圾分类(Matlab)

基于CNN的垃圾识别与分类GUI【新界面】 有需要可直接联系我,基本都在在线,能秒回!可加我看演示视频,不懂可以远程教学 1.此项目设计包括两份完整的源代码,有GUI界面的代码和无GUI界面系统的代码。 (以下部…

pytorch bilstm crf的教程,注意 这里不支持批处理,要支持批处理 用torchcrf这个。

### Bi-LSTM Conditional Random Field ### pytorch tutorials https://pytorch.org/tutorials/beginner/nlp/advanced_tutorial.html ### 模型主要结构: ![title](sources/bilstm.png) pytorch bilstm crf的教程,注意 这里不支持批处理 Python version…

bugku-simple MQTT-wp解析

1.下载题目打开题目,是一个流量包,题目说是MQTT,然后打开流量之后的流量都是MQTT,我们来搜一下MQTT是什么流量 MQTT流量: 是一种基于发布订阅模式的轻量级的通讯协议,并且该协议构建于TCP/IP协议之上&…

HCIA-Access V2.5_2_2网络通信基础_TCP/IP协议栈报文封装

TCP/IP协议栈的封装过程 用户从应用层发出数据先会交给传输层,传输层会添加TCP或者UDP头部,然后交给网络层,网络层会添加IP头部,然后交给数据链路层,数据链路层会添加以太网头部和以太网尾部,最后变成01这样…

Windows 与 Linux 下 Ping IPv6 地址 | 常用网络命令

注:本文为网络命令相关文章合辑。 未整理去重。 一、IPv6 概述 IPv6 即 “Internet 协议版本 6”,因 IPv4 地址资源面临耗尽问题而被引入以替代 IPv4。IPv6 则提供了理论上多达 2 128 2^{128} 2128 个地址,有效解决地址不足困境。 IPv6 具…

关卡选择与布局器

unity布局管理器 使用unity布局管理器轻松对关卡选择进行布局。 实现过程 准备普通按钮button设置字体和对应的sprite设置父gameobject(levelbase) 再创建UI.image(selectbackground)布局背景和大小gameobject(grid…

python学opencv|读取图像(十三)BGR图像和HSV图像互相转换深入

【1】引言 前序学习过程中,我们偶然发现:如果原始图像是png格式,将其从BGR转向HSV,再从HSV转回BGR后,图像的效果要好于JPG格式。 文章链接为: python学opencv|读取图像(十二)BGR图…

程序算术题-2

程序算术题-2 输出所有组合逻辑实例代码 输出所有排列逻辑实例代码 输出所有组合 计算一组数字按n位数组合的所有组合。 逻辑 /*** param stringBuilder 用于组合的拼接* param list 组合数序列* param level 目前位数* param exceptedLevel 组合期待位数*/…

VQ-VAE和VAE 的区别是什么?

第一行所展示的就是普通的VAE,它的核心是通过encoder和decoder,将像素空间的图像压缩到一个提取了核心特征的隐变量向量。VQ-VAE的思想是,即使VAE中压缩的这个隐变量中的向量提取了图片中的核心特征信息,但是这些信息仍然可能存在冗余&#x…

使用Qt Creator设计可视化窗体(一)

一、创建项目 打开 Qt Creator ,在菜单栏中选中: “文件” --------> “新建文件或项目” ;或者使用快捷键:Ctrl n;或者直接点击:“new” Qt 中的构建工具有三种可供选择,分别是&#…

Python3 爬虫 Scrapy 与 Redis

Scrapy是一个分布式爬虫的框架,如果把它像普通的爬虫一样单机运行,它的优势将不会被体现出来。因此,要让Scrapy往分布式爬虫方向发展,就需要学习Scrapy与Redis的结合使用。Redis在Scrapy的爬虫中作为一个队列存在。 一、Scrapy_r…

Docker 学习

Docker 学习 Docker 概念 Docker 安装 一般是在服务器里 Docker阿里云镜像加速 配置主要是Linux命令 Docker命令大纲及帮助文档的使用 docker帮助文档 查看docker命令 docker --help查看某个命令,例如ps的详细文档 docker ps --help也可查阅 [docker官方帮助手…

超牛免费 机械臂模型、工业机器人模型下载网站集合

‌机械臂是一种高精度、多输入多输出的复杂系统,能够模仿人手的动作,按照给定程序、轨迹和要求实现自动抓取、搬运等功能‌。它通常由执行机构、驱动装置、控制系统以及传感器等组成,能够完成各种复杂的动作。‌ 机械臂在工业、医学、娱乐、…

【Python技术】同花顺wencai涨停分析基础上增加连板分析

周末,有读者加我, 说 之前的涨停分析 是否可以增加连板分析。 这个可以加上。 先看效果 这里附上完整代码: import streamlit as st import pywencai import pandas as pd from datetime import datetime, timedelta import plotly.graph_o…

小程序子组件调用父组件方法、父组件调用子组件方法

1、子组件调用父组件方法 子组件this.triggerEvent(finish); startShare(e) {let url config.apiUrl "/business/lzShare/edit";let data this.data.currentData;util.httpPut(url, data).then((res) > {this.triggerEvent(finish);console.log(res.result);})…

怎样使用Eclipse创建Maven的Java WEB 项目

文章目录 1、第一种方式(选择 archetype 方式) 1.1、第一步:创建项目1.2、第二步:配置jre1.3、第三步:配置tomcat1.4、第四步:设置为WEB3.11.5、第五步:配置Maven的编译级别 1.5.1、第一种方法…

C语言刷题

1. 题目描述 根据给出的三角形3条边a:b.c(a.b,c<100.000)&#xff0c;计算三角形的周长和面积。 输入描述: 一行&#xff0c;三角形3条边(能构成三角形)&#xff0c;中间用一个空格隔开. 输出描述: 一行&#xff0c;三角形周长和面积保留两位小数&#xff0c;中问用一个空…

C语言动态内存管理【进阶--5--】

文章目录 [toc] 动态内存管理一、作用即意义二、动态内存函数的介绍Ⅰ、malloc()函数、free()函数Ⅱ、calloc()函数Ⅲ、realloc()函数 三、常见的动态内存错误Ⅰ、对NULL指针的解引用操作Ⅱ、对动态开辟空间的越界访问Ⅲ、对非动态开辟的内存使用free释放Ⅳ、使用free释放动态开…

Python学习(三)—— 基础语法(下)

目录 一&#xff0c;函数 二&#xff0c;列表和元组 2.1 列表基础操作 2.2 切片 2.3 列表的增删查改 2.4 连接链表 2.5 元组 三&#xff0c;字典 3.1 关于字典 3.2 字典的增删查改操作 3.3 遍历字典元素 3.4 合法的key类型 四&#xff0c;文件操作 4.1 打开关闭…

【数据分享】2014-2024年我国POI兴趣点数据(免费获取/来源于OSM地图)

POI是Point of Interest的简称&#xff0c;意为“兴趣点”&#xff0c;是互联网电子地图中用于表示特定位置的地理实体的核心数据类型。POI通常用于标注具体地点&#xff0c;例如餐厅、商场、学校、医院、景点等。这些数据以点的形式呈现&#xff0c;并附带详细属性信息&#x…