从0开始学习JavaScript--JavaScript使用Promise

JavaScript中的异步编程一直是开发中的重要话题。传统的回调函数带来了回调地狱和代码可读性的问题。为了解决这些问题,ES6引入了Promise,一种更现代、更灵活的异步编程解决方案。本文将深入探讨JavaScript中如何使用Promise,通过丰富的示例代码演示Promise的基本概念、链式调用、错误处理等方面的用法,帮助大家更全面地理解和应用Promise。

1. Promise的基本概念

Promise是一个表示异步操作最终完成或失败的对象。它是ES6中新增的一个构造函数,具有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

// 示例:Promise的基本概念
let myPromise = new Promise((resolve, reject) => {// 异步操作let isSuccess = true;if (isSuccess) {resolve("Operation successful");} else {reject("Operation failed");}
});myPromise.then((result) => {console.log(result); // 输出:Operation successful}).catch((error) => {console.error(error); // 输出:Operation failed});

在这个例子中,创建了一个简单的Promise实例,根据异步操作的结果调用resolvereject。然后通过.then().catch()处理成功和失败的情况。

2. 链式调用

Promise的优势之一是支持链式调用,通过.then()方法将多个异步操作连接在一起,增强了代码的可读性。

// 示例:链式调用
function fetchData() {return new Promise((resolve) => {setTimeout(() => {resolve({ data: "Some data" });}, 1000);});
}fetchData().then((result) => {console.log(result); // 输出:{ data: 'Some data' }return result.data;}).then((data) => {console.log(`Processed data: ${data}`); // 输出:Processed data: Some data});

在这个例子中,fetchData()返回一个Promise实例,通过.then()方法处理异步操作的结果,并将结果传递给下一个.then()

3. Promise.all()

Promise.all()接收一个包含多个Promise的可迭代对象,并在所有Promise都成功时才成功,任意一个Promise失败则整体失败。

// 示例:Promise.all()
let promise1 = Promise.resolve("Promise 1");
let promise2 = new Promise((resolve) => setTimeout(() => resolve("Promise 2"), 2000));
let promise3 = fetch("https://api.example.com/data");Promise.all([promise1, promise2, promise3]).then((results) => {console.log(results); // 输出:['Promise 1', 'Promise 2', Response]}).catch((error) => {console.error(error); // 输出:如果有任意一个Promise失败});

在这个例子中,Promise.all()等待所有传入的Promise完成,然后返回一个包含所有结果的新Promise。

4. Promise.race()

Promise.race()同样接收一个包含多个Promise的可迭代对象,但只要有一个Promise完成或失败,整体就完成或失败。

// 示例:Promise.race()
let racePromise1 = new Promise((resolve) => setTimeout(() => resolve("Race Promise 1"), 1000));
let racePromise2 = new Promise((resolve) => setTimeout(() => resolve("Race Promise 2"), 2000));Promise.race([racePromise1, racePromise2]).then((result) => {console.log(result); // 输出:Race Promise 1}).catch((error) => {console.error(error); // 不会执行});

在这个例子中,Promise.race()返回一个新Promise,它会在第一个Promise完成或失败时完成或失败。

5. 错误处理

Promise通过.catch()方法提供了一种集中处理错误的方式,使得错误处理更为清晰。

// 示例:错误处理
function throwError() {return new Promise((resolve, reject) => {reject("An error occurred");});
}throwError().then((result) => {console.log(result); // 不会执行}).catch((error) => {console.error(error); // 输出:An error occurred});

在这个例子中,throwError()返回一个Promise,并通过.catch()捕获了错误。

6. async/await与Promise

ES2017引入了asyncawait关键字,使得异步代码更像同步代码,更容易理解和维护。

// 示例:async/await与Promise
function fetchData() {return new Promise((resolve) => {setTimeout(() => {resolve("Async data");}, 1000);});
}async function fetchDataAsync() {try {let result = await fetchData();console.log(result); // 输出:Async data} catch (error) {console.error(error); // 不会执行}
}fetchDataAsync();

在这个例子中,fetchDataAsync()使用async标记,内部使用await等待Promise完成,使得异步代码看起来更加同步。

总结

Promise是JavaScript中处理异步编程的一种现代解决方案,通过简洁的语法和丰富的方法提供了更好的编程体验。通过本文的介绍,读者应该对Promise的基本概念、链式调用、Promise.all()Promise.race()、错误处理以及与async/await的结合有了更全面的了解。

未来,随着JavaScript语言的发展,异步编程的解决方案可能会进一步演进,但Promise作为当前主流的解决方案,将在很长一段时间内继续发挥着重要作用。

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

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

相关文章

spider 网页爬虫中的 AWS 实例数据获取问题及解决方案

前言 AAWS实例数据对于自动化任务、监控、日志记录和资源管理非常重要。开发人员和运维人员可以通过AWS提供的API和控制台访问和管理这些数据,以便更好地管理和维护他们在AWS云上运行的实例。然而,在使用 spider 框架进行网页爬取时,我们常常…

.Net6 部署到IIS示例

基于FastEndpoints.Net6 框架部署到IIS 环境下载与安装IIS启用与配置访问网站 环境下载与安装 首先下载环境安装程序,如下图所示,根据系统位数选择x86或者x64进行下载安装,网址:Download .NET 6.0。 IIS启用与配置 启用IIS服务 打开控制面板&#xff…

【Linux】【开发】使用sed命令遇到的乱码问题

🐚作者简介:花神庙码农(专注于Linux、WLAN、TCP/IP、Python等技术方向)🐳博客主页:花神庙码农 ,地址:https://blog.csdn.net/qxhgd🌐系列专栏:Linux技术&…

【论文阅读笔记】Supervised Contrastive Learning

【论文阅读笔记】Supervised Contrastive Learning 摘要 自监督批次对比方法扩展到完全监督的环境中,以有效利用标签信息提出两种监督对比损失的可能版本 介绍 交叉熵损失函数的不足之处,对噪声标签的不鲁棒性和可能导致交叉的边际,降低了…

键盘快捷键工具Keyboard Maestro mac中文版介绍

Keyboard Maestro mac是一款键盘快捷键工具,它可以帮助用户通过自定义快捷键来快速完成各种操作,提高工作效率。Keyboard Maestro支持多种快捷键组合,包括单键、双键、三键、四键组合等,用户可以根据自己的习惯进行设置。此外&…

各类语言真实性能比较列表

这篇文章是我所做或将要做的所有真实世界性能比较的索引。如果你对想要看到的其他真实世界案例有建议,请在评论中添加。 用例 1 — JWT 验证 & MySQL 查询 该用例包括: 从授权头部获取 JWT验证 JWT 并从声明中获取电子邮件使用电子邮件执行 MySQL…

【计算机网络笔记】路由算法之链路状态路由算法

系列文章目录 什么是计算机网络? 什么是网络协议? 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能(1)——速率、带宽、延迟 计算机网络性能(2)…

C++二分算法:找到最接近目标值的函数值

本文涉及的基础知识点 二分查找算法合集 题目 Winston 构造了一个如上所示的函数 func 。他有一个整数数组 arr 和一个整数 target ,他想找到让 |func(arr, l, r) - target| 最小的 l 和 r 。 请你返回 |func(arr, l, r) - target| 的最小值。 请注意&#xff0c…

基于 Junit 的接口自动化测试框架实现!

分层的自动化测试 5~10 年前,我们接触的自动化测试更关注的是 UI 层的自动化测试,Mercury 的 WinRunner/QTP 是那个时代商业性自动化测试产品的典型代表,在那个时代大家单纯想的都是能用一个自动化操作的工具替代人力的点击,商业…

【教3妹学编辑-mysql】详解数据库三大范式

什么是范式 简单地理解就是:数据库设计时遵循的规范 三大范式 数据库三大范式包含:1、第一范式(1NF);2、第二范式(2NF);3、第三范式(3NF)。其中,第一范式(1NF)的要求是属性不可分割,第二范式(2NF)的要求是…

Java基础-----正则表达式

文章目录 1.简介2.目的3.学习网站4.常用匹配字符5.String类中用到正则表达式的方法 1.简介 又叫做规则表达式。是一种文本模式,包括普通字符和特殊字符(元字符)。正则使用单个字符来描述、匹配一系列某个句法规则的字符串,通常用…

[架构之路-247]:目标系统 - 设计方法 - 软件工程 - 结构化方法的基本思想、本质、特点以及在软件开发、在生活中的应用

目录 前言: 一、什么是非结构化方法 1.1 什么是非结构化方法 1.2 非结构化方法的适用场合 二、什么是结构化方法 1.1 结构化方法诞生的背景:软件规模发展:大规模、复杂系统的需要 1.2 概述 1.3 主要特点与核心思想 三、结构化方法在…

【Web】Flask|Jinja2 SSTI

目录 ①[NISACTF 2022]is secret ②[HNCTF 2022 WEEK2]ez_SSTI ③[GDOUCTF 2023] ④[NCTF 2018]flask真香 ⑤[安洵杯 2020]Normal SSTI ⑥[HNCTF 2022 WEEK3]ssssti ⑦[MoeCTF 2021]地狱通讯 ①[NISACTF 2022]is secret dirsearch扫出/secret 明示get传一个secret ?…

Wireshark抓包:理解TCP三次握手和四次挥手过程

TCP是一种面向连接、端到端可靠的协议,它被设计用于在互联网上传输数据和确保成功传递数据和消息。本节来介绍一下TCP中的三次握手和四次挥手。 文章目录 1 TCP头部格式2 wireshark抓包分析2.1 SEQ和ACK2.2 三次握手2.3 四次挥手 3 程序 1 TCP头部格式 TCP头部占据…

【FPGA】Verilog:实现 RS 触发器 | Flip-Flop | 使用 NOR 的 RS 触发器 | 使用 NAND 的 RS 触发器

目录 0x00 RS 触发器(RS Flip-Flop) 0x01 实现 RS 触发器 0x02 使用 NOR 的 RS 触发器 0x03 使用 NAND 的 RS 触发器 0x00 RS 触发器(RS Flip-Flop) 触发器(Flip-Flop)是一种带有时钟的二进制存储设备…

C/C++多级指针与多维数组

使用指针访问数组 指针类型的加减运算可以使指针内保存的首地址移动。 指针类型加n后。首地址向后移动 n * 步长 字节。 指针类型减n后。首地址向前移动 n * 步长 字节。 步长为指针所指向的类型所占空间大小。 例如: int *p (int *)100;p 1,结果为首…

Autox.js和Auto.js4.1.1手机编辑器不好用我自己写了一个编辑器

功能有 撤销 重做 格式化 跳转关键词 下面展示一些 内联代码片。 "ui"; ui.layout( <drawer id"drawer"><vertical><appbar><toolbar id"toolbar"title""h"20"/></appbar><horizontal b…

Linux环境搭建(tomcat,jdk,mysql下载)

是否具备环境&#xff08;前端node&#xff0c;后端环境jdk&#xff09;安装jdk,配置环境变量 JDK下载 - 编程宝库 (codebaoku.com) 进入opt目录 把下好的安装包拖到我们的工具中 把解压包解压 解压完成&#xff0c;可以删除解压包 复制解压文件的目录&#xff0c;配置环境变量…

【opencv】debug报错HEAP CORRUPTION DETECTED

运行至第一句涉及矩阵运算的代码&#xff08;如cv::multiply&#xff09;时报错 HEAP CORRUPTION DETECTED: after Normal block (#45034) at 0x000001BDC586F0E0. CRT detected that the application wrote to memory after end of heap buffer.release下不会报错&#xff0…

PDF控件Spire.PDF for .NET【转换】演示:自定义宽度、高度将 PDF 转 SVG

我们在上一篇文章中演示了如何将 PDF 页面转换为 SVG 文件格式。本指南向您展示如何使用最新版本的 Spire.PDF 以及 C# 和 VB.NET 指定输出文件的宽度和高度。 Spire.Doc 是一款专门对 Word 文档进行操作的 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻…