当前位置： 首页 > news >正文

前端ES6异步编程技术——Promise使用

news 2025/11/2 14:47:55

Promise是什么

官方的定义是：Promise是ES6新推出的用于进行异步编程的解决方案，旧方案是单纯使用回调函数来解决的。对于开发人员来说，我们把promise当作一个普通的对象即可，使用它可以用来封装一个异步操作并可以获取其成功/失败的结果值。promise最大的好处在于能够解决回调地狱的问题。

Promise的状态改变

  1. pending变为resolved
  2. pending变为rejected

注意：promise有且只有这2种状态改变，并且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果值。

Promise的基本流程

在这里插入图片描述

Promise的基本使用


<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本使用</title><link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container"><h2 class="page-header">Promise 初体验</h2><button class="btn btn-primary" id="btn">点击抽奖</button></div><script>//生成随机数function rand(m,n){return Math.ceil(Math.random() * (n-m+1)) + m-1;}//获取元素对象const btn = document.querySelector('#btn');//绑定单击事件btn.addEventListener('click', function(){//1.创建promise对象(初始状态为pending状态)，指定执行器函数const p = new Promise((resolve,rejected)=>{//2.在执行器函数种启动异步任务setTimeout(()=>{let n = rand(1,100)if(n<=30){resolve('恭喜')//3.如果成功，调用resolve()，指定成功的value，promise变为resolved状态}else{rejected('再接再厉')//4.失败，调用rejected()，指定失败的reason，promise变为rejected状态}})})console.log("=======")//在setTimeout之后执行，因为setTimeout是在promise内部同步调用的//5.promise指定成功或失败的回调函数来获取成功的value或失败的reasonp.then((data)=>{//成功的回调函数onResolved，得到成功的dataconsole.log(data)alert(data)},(reason)=>{//失败的回调函数onRejected，得到失败的reasonalert(reason)console.log(reason)})});</script>
</body></html>

Promise操作fs模块

const fs = require('fs')const p = new Promise((resolve, rejected) => {fs.readFile("./desktop/content.txt", function (err, data) {if (!err) {resolve(data)} else {rejected(err)}});
})p.then((data) => {console.log(data.toString())// alert(data)
}, (reason) => {// alert(reason)console.log(reason)
})

Promise操作ajax

<script>/*** 封装一个函数 sendAJAX 发送 GET AJAX 请求* 参数   URL* 返回结果 Promise 对象*/function sendAJAX(url){return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.responseType = 'json';xhr.open("GET", url);xhr.send();//处理结果xhr.onreadystatechange = function(){if(xhr.readyState === 4){//判断成功if(xhr.status >= 200 && xhr.status < 300){//成功的结果resolve(xhr.response);}else{reject(xhr.status);}}}});}sendAJAX('https://xxxx').then(value => {console.log(value);}, reason => {console.warn(reason);});</script>

使用util.promisify方法进行promise风格转化

传入一个以(err,valve)=>{}回调函数作为最后一个参数的函数，并返回一个返回promise的版本。这句话有点拗口，我们使用案例来说明一下：

const fs = require('fs')
const util = require('util')let fsPromise = util.promisify(fs.readFile)//readFile函数最后一个参数是回调函数
fsPromise('./desktop/content.txt').then((data) => {console.log(data.toString())
}, (reason) => {console.log(reason)
})//没有经过promise风格转化的写法
// const p = new Promise((resolve, rejected) => {
//     fs.readFile("./desktop/content.txt", function (err, data) {
//         if (!err) {
//             resolve(data)
//         } else {
//             rejected(err)
//         }
//     });
// })// p.then((data) => {
//     console.log(data.toString())
//     // alert(data)
// }, (reason) => {
//     // alert(reason)
//     console.log(reason)
// })

Promise的API

  • Promise构造函数：Promise(excutor)

    1. excutor函数：执行器(resolve,reject)=>{}
    2. resolve函数：内部定义成功时我们调用的函数
    3. reject函数：内部定义失败时我们调用的函数
      注意：executor会在promise的内部立即同步调用，异步操作在执行器中执行

  • Promise.prototype.then 方法: (onResolved, onRejected) => {}

    1. onResolved 函数: 成功的回调函数 (value) => {}
    2. onRejected 函数: 失败的回调函数 (reason) => {}
      说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象

  • Promise.prototype.catch 方法: (onRejected) => {}

    1. onRejected 函数: 失败的回调函数 (reason) => {}
      说明: then()的语法糖, 相当于: then(undefined, onRejected)

  • Promise.resolve 方法: (value) => {}

    1. value: 成功的数据或 promise 对象
      说明: 返回一个成功/失败的 promise 对象

  • Promise.reject 方法: (reason) => {}

    1. reason: 失败的原因
      说明: 返回一个失败的 promise 对象

  • Promise.all 方法: (promises) => {}

    1. promises: 包含 n 个 promise 的数组
      说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

  • Promise.race 方法: (promises) => {}

    1. promises: 包含 n 个 promise 的数组
      说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

  • 案例如下

   <script>//let p1 = Promise.resolve(521);//如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象//如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果let p2 = Promise.resolve(new Promise((resolve, reject) => {// resolve('OK');reject('Error');}));// console.log(p2);p2.catch(reason => {console.log(reason);})</script><script>// let p = Promise.reject(521);// let p2 = Promise.reject('iloveyou');let p3 = Promise.reject(new Promise((resolve, reject) => {resolve('OK');}));console.log(p3);</script><script>let p1 = new Promise((resolve, reject) => {resolve('OK');})// let p2 = Promise.resolve('Success');let p2 = Promise.reject('Error');let p3 = Promise.resolve('Oh Yeah');//const result = Promise.all([p1, p2, p3]);console.log(result);</script><script>let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('OK');}, 1000);})let p2 = Promise.resolve('Success');let p3 = Promise.resolve('Oh Yeah');//调用const result = Promise.race([p1, p2, p3]);console.log(result);</script>

Promise的关键问题

  1. 如何改变 promise 的状态?
    (1) resolve(value): 如果当前是 pending 就会变为 resolved
    (2) reject(reason): 如果当前是 pending 就会变为 rejected
    (3) 抛出异常: 如果当前是 pending 就会变为 rejected
  2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?
    当 promise 改变为对应状态时都会调用
  3. 改变 promise 状态和指定回调函数谁先谁后?
    (1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
    (2) 如何先改状态再指定回调?
    ① 在执行器中直接调用 resolve()/reject()
    ② 延迟更长时间才调用 then()
    (3) 什么时候才能得到数据?
    ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
    ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
  4. promise.then()返回的新 promise 的结果状态由什么决定?
    (1) 简单表达: 由 then()指定的回调函数执行的结果决定
    (2) 详细表达:
    ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
    ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
    ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
  5. promise 如何串连多个操作任务?
    (1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
    (2) 通过 then 的链式调用串连多个同步/异步任务
  6. promise 异常传透?
    (1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
    (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理
  7. 中断 promise 链?
    (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
    (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Promise关键问题 - 中断 Promise 链条</title>
</head>
<body><script>let p = new Promise((resolve, reject) => {setTimeout(() => {resolve('OK');}, 1000);});p.then(value => {console.log(111);//有且只有一个方式return new Promise(() => {});}).then(value => {console.log(222);}).then(value => {console.log(333);}).catch(reason => {console.warn(reason);});</script>
</body>
</html>

async与await

  • async 函数

    1. 函数的返回值为 promise 对象
    2. promise 对象的结果由 async 函数执行的返回值决定

  • await 表达式

    1. await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
    2. 如果表达式是 promise 对象, await 返回的是 promise 成功的值
    3. 如果表达式是其它值, 直接将此值作为 await 的返回值

  • 注意

    1. await必须写在async函数中，但async函数中可以没有await
    2. 如果await的promise失败了，就会抛出异常，需要通过try…catch捕获处理
/*** resource  1.html  2.html 3.html 文件内容*/const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);//回调函数的方式
// fs.readFile('./resource/1.html', (err, data1) => {
//     if(err) throw err;
//     fs.readFile('./resource/2.html', (err, data2) => {
//         if(err) throw err;
//         fs.readFile('./resource/3.html', (err, data3) => {
//             if(err) throw err;
//             console.log(data1 + data2 + data3);
//         });
//     });
// });//async 与 await
async function main(){try{//读取第一个文件的内容let data1 = await mineReadFile('./resource/1x.html');let data2 = await mineReadFile('./resource/2.html');let data3 = await mineReadFile('./resource/3.html');console.log(data1 + data2 + data3);}catch(e){console.log(e.code);}
}main();

相关文章：

前端ES6异步编程技术——Promise使用

Promise是什么 官方的定义是&#xff1a;Promise是ES6新推出的用于进行异步编程的解决方案&#xff0c;旧方案是单纯使用回调函数来解决的。对于开发人员来说&#xff0c;我们把promise当作一个普通的对象即可&#xff0c;使用它可以用来封装一个异步操作并可以获取其成功/失败…...

编程日记 2023/5/19 17:43:11

Kotlin实现简单的学生信息管理系统

文章目录一、实验内容二、实验步骤1、页面布局2、数据库3、登录活动4、增删改查三、运行演示四、实验总结五、源码下载一、实验内容 根据Android数据存储的内容&#xff0c;综合应用SharedPreferences和SQLite数据库实现一个用户信息管理系统&#xff0c;强化对SharedPreferen…...

编程日记 2023/5/19 17:43:09

413. 等差数列划分

413. 等差数列划分 如果一个数列 至少有三个元素 &#xff0c;并且任意两个相邻元素之差相同&#xff0c;则称该数列为等差数列。 例如&#xff0c;[1,3,5,7,9]、[7,7,7,7] 和 [3,-1,-5,-9] 都是等差数列。 给你一个整数数组 nums &#xff0c;返回数组 nums 中所有为等差数…...

编程日记 2023/5/19 17:43:06

设计模式七大原则

一、设计模式概念 1.1 软件设计模式的产生背景 "设计模式"最初并不是出现在软件设计中&#xff0c;而是被用于建筑领域的设计中。 1977年美国著名建筑大师、加利福尼亚大学伯克利分校环境结构中心主任克里斯托夫亚历山大&#xff08;Christopher Alexander&#x…...

编程日记 2023/5/19 17:43:04

【Mybatis系列】Mybatis常见的分页方法以及源码理解

Mybatis-Plus的selectPage 引入依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.1</version></dependency>添加分页插件 Configuration public class My…...

编程日记 2023/5/19 17:43:01

Java面向对象:多态特性的学习

本文介绍了Java面向对象多态特性, 多态的介绍. 多态的实现条件–1.发生继承.2.发生重写(重写与重载的区别)3.向上转型与向下转型.4.静态绑定和动态绑定5. 实现多态 举例总结多态的优缺点 避免在构造方法内调用被重写的方法… Java面向对象:多态特性的学习一.什么是多态?二.多态…...

编程日记 2023/5/19 17:42:59

id函数 / 可变类型变量 / 不可变类型变量 / +=操作

前言 再说正文之前&#xff0c;需要大家先了解一下对象&#xff0c;指针和引用的含义&#xff0c;不懂得同学可以参考我上一篇博客“(12条消息) 引用是否有地址的讨论的_xx_xjm的博客-CSDN博客” 正文 一&#xff1a;python中一切皆对象 “python中一切皆对象”这句话我相信…...

编程日记 2023/5/19 17:42:57

aws apigateway 使用apigateway集成lambda

参考资料 代理集成&#xff0c;https://docs.aws.amazon.com/zh_cn/apigateway/latest/developerguide/api-gateway-create-api-as-simple-proxy-for-lambda.html非代理集成&#xff0c;https://docs.aws.amazon.com/zh_cn/apigateway/latest/developerguide/getting-started-…...

编程日记 2023/5/19 17:42:54

Linux SPI 驱动实验

目录 一、Linux 下 SPI 驱动框架简介 1、SPI 主机驱动 2、SPI 设备驱动 SPI 设备数据收发处理流程 3、SPI 设备和驱动匹配过程 二、添加SPI 设备信息 1、添加 ICM20608 所使用的 IO 2、 在 ecspi3 节点追加 icm20608 子节点 三、编写 ICM20608 驱动 1、修改makefile​…...

编程日记 2023/5/19 17:42:52

[1.4]计算机系统概述——操作系统的体系结构

第一章 计算机系统概述 操作系统的体系结构 大内核/单内核/宏内核微内核 通过之前的学习&#xff0c;我们知道计算机系统的层次结构是这样的。 但是操作系统的内部其实还可以再进一步地划分。 一部分是内核的功能&#xff0c;一部分是非内核的功能。 操作系统最核心的功能&…...

编程日记 2023/5/19 17:42:49

FPGA的GigE Vision IP相机图像采集方案设计，转换为千兆UDP，支持10G MAC

1 概述 GigE Vision是一个比较复杂的协议&#xff0c;要在FPGA中完全实现具有较大的难度。如果FPGA作为接收端希望实现GigE Vision相机的配置和图像采集功能&#xff0c;则只需要实现其中小部分功能即可。本文对原有GigE Vision协议的结构进行了裁剪&#xff0c;仅保留设备搜索…...

编程日记 2023/5/19 17:42:47

大数据相关面试题

linux 常见linux高级命令&#xff1f; top、iotopnetstatdf -hjmap -heaptarrpmps -efshell 用过的shell工具&#xff1f; awk Awk 命令详解 - 简书 awk是行处理器: 相比较屏幕处理的优点&#xff0c;在处理庞大文件时不会出现内存溢出或是处理缓慢的问题&#xff0c;通常用来…...

编程日记 2023/5/19 17:42:45

AI绘画第二步，抄作业复现超赞的效果！

上一篇&#xff0c;讲了如何安装AI绘画软件&#xff0c;但是装完后发现生成效果很渣&#xff01;而网上那些效果都很赞。真的是理想很丰满&#xff0c;现实很骨感。今天就是来聊聊如何抄作业&#xff0c;最大程度的还原那些超赞的效果。换一种说法就是&#xff0c;教大家如何使…...

编程日记 2023/5/19 17:42:42

Python的并发编程

我们将一个正在运行的程序称为进程。每个进程都有它自己的系统状态&#xff0c;包含内存状态、打开文件列表、追踪指令执行情况的程序指针以及一个保存局部变量的调用栈。通常情况下&#xff0c;一个进程依照一个单序列控制流顺序执行&#xff0c;这个控制流被称为该进程的主线…...

编程日记 2023/5/19 17:42:40

【Linux】基本系统维护命令

&#x1f60a;&#x1f60a;作者简介&#x1f60a;&#x1f60a; &#xff1a; 大家好&#xff0c;我是南瓜籽&#xff0c;一个在校大二学生&#xff0c;我将会持续分享C/C相关知识。 &#x1f389;&#x1f389;个人主页&#x1f389;&#x1f389; &#xff1a; 南瓜籽的主页…...

编程日记 2023/5/19 17:42:38

高数：数列的收敛

数列特点无限个数特定顺序数列和集合区别集合可以乱序&#xff0c;数列不行集合出现重复元素依然相同&#xff0c;数列出现新的重复元素就不相等[1&#xff0c;2&#xff0c;3&#xff0c;4][1&#xff0c;2&#xff0c;3&#xff0c;3&#xff0c;4]对集合来说相等&#xff0c…...

编程日记 2023/5/19 17:42:35

不平凡的一天——

作者&#xff1a;指针不指南吗 专栏&#xff1a;个人日常记录 &#x1f43e;或许会很慢&#xff0c;但是不可以停下来&#x1f43e; 文章目录1.自我介绍2.上学期3.不凡的一天4.新学期写个博客&#xff0c;简单记录一下&#xff0c;新学期加油&#xff01;&#xff01;&#xff…...

编程日记 2023/5/19 17:42:33

【Java基础】Map遍历的5种方式

目录 创建一个集合 方式一&#xff1a;Iterator 迭代器遍历 map.entrySet().iterator(); map.keySet().iterator(); 方式二&#xff1a;For Each方式遍历 map.forEach(BiConsumer action) 方式三&#xff1a;获取Collection集合 map.values().forEach() 方式四&#x…...

编程日记 2023/5/19 17:42:29

第十四届蓝桥杯三月真题刷题训练——第 2 天

目录 题目1&#xff1a;奇数倍数 代码: 题目2&#xff1a;求值 代码: 题目3&#xff1a;求和 代码: 题目4&#xff1a;数位排序 代码: 题目1&#xff1a;奇数倍数 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即…...

编程日记 2023/5/19 17:42:27

自然语言处理历史最全预训练模型(部署)汇集分享

什么是预训练模型&#xff1f;预练模型是其他人为解决类似问题而创建的且已经训练好的模型。代替从头开始建立模型来解决类似的问题&#xff0c;我们可以使用在其他问题上训练过的模型作为起点。预训练的模型在相似的应用程序中可能不是100&#xff05;准确的。本文整理了自然语…...

编程日记 2023/5/19 17:42:25

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/10/31 23:54:54

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/10/29 9:58:23

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/10/24 17:48:33

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2025/10/31 19:32:22

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2025/10/25 5:12:22

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2025/10/24 0:21:12