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

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

news 2025/12/20 20:20:02

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

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/12/15 21:46:10

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/12/17 11:45:21

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/12/3 23:08:18

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...

编程新知 2025/12/13 8:07:06

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

编程新知 2025/11/28 10:50:12

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

编程新知 2025/12/16 20:16:28

网页端 js 读取发票里的二维码信息（图片和PDF格式）

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...

编程新知 2025/12/16 8:11:16

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

编程新知 2025/9/26 14:55:24

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

编程新知 2025/10/7 3:17:39