【JavaScript】Promise 和异步操作

文章目录

    • 1. 什么是Promise
    • 2. 基本用法
      • 使用`.then()`处理成功状态
      • 使用`.catch()`处理失败状态
      • 链式调用
    • 3. Promise.all() 和 Promise.race()
      • Promise.all()
      • Promise.race()
    • 4. 异步操作与async/await
      • 使用 async/await
    • 5. 总结

在 JavaScript 中, Promise 是一种处理异步操作的重要工具,它提供了更清晰、更可控的异步编程方式。本篇博客将介绍 Promise 的概念、基本用法以及如何利用 Promise 进行更高效的异步操作。

1. 什么是Promise

Promise 是一种表示异步操作最终完成或失败的对象。它有三个状态:pending(等待中)、fulfilled(已成功)、rejected(已失败)。一旦状态发生变化,就会触发相应的回调函数。

let promise = new Promise(function(resolve, reject) {// 异步操作,例如网络请求或定时器setTimeout(function() {let isSuccess = Math.random() > 0.5;if (isSuccess) {resolve("Operation succeeded!");} else {reject("Operation failed!");}}, 1000);
});

在上述例子中,通过 new Promise 创建了一个 Promise 对象,它表示一个异步操作。在 Promise 内部,通过 resolvereject 回调函数来改变 Promise 的状态。

2. 基本用法

使用.then()处理成功状态

promise.then(function(result) {console.log("Success: " + result);
});

在上述例子中,使用 .then() 方法来注册在 Promise 成功时执行的回调函数。

使用.catch()处理失败状态

promise.catch(function(error) {console.error("Error: " + error);
});

在上述例子中,使用 .catch() 方法来注册在 Promise 失败时执行的回调函数。

链式调用

promise.then(function(result) {console.log("Step 1: " + result);return "Step 2 result";}).then(function(result) {console.log("Step 2: " + result);throw new Error("Custom Error");}).catch(function(error) {console.error("Caught an error: " + error.message);});

在上述例子中,通过链式调用的方式,可以依次处理不同步骤的结果。在第二个 .then() 中,通过 throw 抛出一个错误,然后通过 .catch() 捕获并处理。

3. Promise.all() 和 Promise.race()

Promise.all()

let promise1 = fetchData("url1");
let promise2 = fetchData("url2");
let promise3 = fetchData("url3");Promise.all([promise1, promise2, promise3]).then(function(results) {console.log("All promises fulfilled:", results);}).catch(function(error) {console.error("One or more promises rejected:", error);});

Promise.all() 接受一个包含多个 Promise 对象的数组,返回一个新的 Promise。只有当所有 Promise 都成功时,才会触发 .then(),否则触发 .catch()

Promise.race()

let racePromise = Promise.race([promise1, promise2, promise3]);racePromise.then(function(winner) {console.log("The first promise fulfilled:", winner);}).catch(function(error) {console.error("The first promise rejected:", error);});

Promise.race() 同样接受一个包含多个 Promise 对象的数组,返回一个新的 Promise。只要有一个 Promise 率先改变状态,就会触发相应的回调。

4. 异步操作与async/await

使用 async/await

async function fetchDataWithAsync(url) {try {let result = await fetchData(url);console.log("Async operation succeeded:", result);} catch (error) {console.error("Async operation failed:", error);}
}fetchDataWithAsync("https://example.com/api/data");

通过 async 关键字定义的函数可以包含 await 表达式,它会暂停函数的执行,等待 Promise 的解决。

5. 总结

Promise 是 JavaScript 中处理异步操作的一种强大工具,它通过清晰的状态机制和链式调用的方式,提供了更优雅的异步编程方式。通过 .then().catch() 处理成功和失败的情况,通过 Promise.all()Promise.race() 处理多个 Promise 对象的情况,再结合 async/await 语法糖,使得异步编程更加清晰、可读、可维护。希望通过本篇博客,你对 Promise 和异步操作有了更深入的理解。

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

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

相关文章

Vue3高频知识点和写法

一 Vue插件 二 vue3项目创建 创建完成后npm install npm run dev 三 setup 一 响应式数据 setup函数是用来代替data和methods的写法的,在setup函数中声明的数据和函数,导出后可以在页面中使用。 但是暂时不是响应式数据,如果要响应式数据的…

C++笔记1:操纵符输入输出

C操纵符用来控制输出控制,一是输出的形式,二是控制补白的数量和位置。本文记录一下,在一些笔试的ACM模式可能有用。其中1-4节的部分是关于格式化输入输出操作,5-6节的部分是关于未格式化输入输出操作。 1. 控制布尔值的格式 一般…

C语言—基础数据类型(含进制转换)

进制转换不多,但我觉得适合小白(我爱夸自己嘿嘿) 练习 1. 确认基础类型所占用的内存空间(提示:使用sizeof 运算符): 在这里我说一下,long 类型通常占用 4 字节。在 64 位系统上,long 类型通常也可为 8 字节。 格式…

LeetCode、208. 实现 Trie (前缀树)【中等,自定义数据结构】

文章目录 前言LeetCode、208. 实现 Trie (前缀树)【中等,自定义数据结构】题目链接与分类思路 资料获取 前言 博主介绍:✌目前全网粉丝2W,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领…

【ASP.NET Core 基础知识】--测试--单元测试和集成测试

一、单元测试 1.1 单元测试概述 单元测试是软件开发中的一种测试方法,用于验证软件中的最小可测试单元——通常是函数、方法或类——的行为是否符合预期。它的核心思想是将程序分解成独立的单元,并针对每个单元编写测试用例,以验证其功能是…

假期day9(2024/2/14)

获取数据库查询的值并调用值使用函数:sqlite3_get_table 在回调函数中获取数据库查询值,无法在其他函数调用:使用函数sqlite3_exec(db, sql, select_callback, &flag, &errmsg) 创建表 create table if not exists 表名…

力扣代码学习日记一

Problem: 389. 找不同 文章目录 思路解题方法复杂度Code 思路 给定两个字符串 s 和 t ,它们只包含小写字母。 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。 示例 1: 输入:s "a…

c++ 自定义Logger 日志类

Logger 日志类 线程安全的日志组件 默认保存到文件&#xff0c;并支持回调函数&#xff0c;比如显示到界面 #ifndef LOGGER_H #define LOGGER_H#include <iostream> #include <sstream> #include <mutex> #include <thread> #include <iomanip&g…

低资源学习与知识图谱:构建与应用

目录 前言1 低资源学习方法1.1 数据增强1.2 特征增强1.3 模型增强 2 低资源知识图谱构建与推理2.1 元关系学习2.2 对抗学习2.3 零样本关系抽取2.4 零样本学习与迁移学习2.5 零样本学习与辅助信息 3 基于知识图谱的低资源学习应用3.1 零样本图像分类3.2 知识增强的零样本学习3.3…

云原生介绍与容器的基本概念

云原生介绍 1、云原生的定义 云原生为用户指定了一条低心智负担的、敏捷的、能够以可扩展、可复制的方式最大化地利用云的能力、发挥云的价值的最佳路径。 2、云原生思想两个理论 第一个理论基础是&#xff1a;不可变基础设施。 第二个理论基础是&#xff1a;云应用编排理…

备战蓝桥杯---图论基础理论

图的存储&#xff1a; 1.邻接矩阵&#xff1a; 我们用map[i][j]表示i--->j的边权 2.用vector数组&#xff08;在搜索专题的游戏一题中应用过&#xff09; 3.用邻接表&#xff1a; 下面是用链表实现的基本功能的代码&#xff1a; #include<bits/stdc.h> using nam…

纪念一下 开始写博客两周以来第一次入围榜单

两周里 创作博客 第一次进入热榜 虽然只有几十名 但也算是一个突破 确实没想到自己随便做的笔记就入围了 感谢各位大佬的支持&#xff01;继续进步&#xff01;&#x1f973;&#x1f973;&#x1f973;

ubuntu下conda如何设置镜像源(清华镜像源)

ubuntu下如何设置镜像源 首先贴出.condarc&#xff0c;直接给出清华的镜像源&#xff0c;需要的小伙伴直接使用&#xff0c;别看内容了 # ~/.condarc channels:- https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/r- https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs…

服务流控(Sentinel)

引入依赖 <!-- 必须的 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency><!-- sentinel 核心库 --> <dependency><groupId>com.ali…

权限系统设计

权限系统设计 RBAC 基于角色的访问控制 ABAC 基于属性的访问控制 普通的系统无非 CRUD&#xff0c;那系统如何控制一个用户该看到哪些数据、能操作哪些功能&#xff1f;日常开发中最常用到 RBAC 和 OAuth2 这两种访问控制和授权方案 RBAC 基于角色的访问控制 所有的访问控制模…

GoZero 微服务个人探究之路(十一)编写sql语句所用到的sqlx包

前言 使用go-zero的脚手架工具goctl生成数据库代码时候&#xff0c;我们发现goctl引入了sqlx这个包来进行sql操作&#xff0c;本文旨在对sqlx包进行整理&#xff0c;来方便我们使用go-zero&#xff0c;sqlx进行sql操作 Why sqlx 为什么要额外引入sqlx包&#xff0c;增加复杂…

力扣精选算法100道——【模板】前缀和 (二维)

目录 &#x1f388;题目解析 &#x1f388;算法原理 &#x1f388;实现代码 二维前缀和【模板】 &#x1f388;题目解析 上一题我们讲述了一维的前缀和求法。 第一行三个参数&#xff0c;n是行数3&#xff0c;m是列数4&#xff0c;q3代表查询次数 接下来就是n行m列的矩阵…

基于python混沌系统敏感文本信息加密算法的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【Python】洛谷P7614 [COCI2011-2012#2] NAJBOLJIH 5

P7614 [COCI2011-2012#2] NAJBOLJIH 5 题目描述 给定 8 8 8 个数字 X 1 , X 2 , . . . , X 8 X_1,X_2,...,X_8 X1​,X2​,...,X8​&#xff0c;从中选出 5 5 5 个数字&#xff0c;使得这 5 5 5 个数字的总和最大。输出这 5 5 5 个数字的和以及它们的编号。 X i X_i Xi​…

微服务OAuth 2.1认证授权Demo方案(Spring Security 6)

文章目录 一、介绍二、auth微服务代码1. SecurityConfig2. UserDetailsService3. 总结 三、gateway微服务代码1. 统一处理CORS问题 四、content微服务代码1. controller2. SecurityConfig3. 解析JWT Utils4. 总结 五、一些坑 书接上文 微服务OAuth 2.1认证授权可行性方案(Sprin…