JavaScript异步编程:理解和使用Promise、Async/Await

JavaScript是一种单线程语言,这意味着它一次只能执行一个任务。然而,在Web开发中,我们经常需要处理异步操作,例如网络请求、定时器、事件监听等。JavaScript提供了多种方式来处理异步编程,包括回调函数、Promise、Async/Await等。

回调函数

回调函数是最基本的异步编程方式。当一个异步任务完成时,它会调用一个回调函数。这种方式的问题是回调地狱,即回调函数嵌套过多,难以理解和维护。

function asyncTask(callback) {setTimeout(() => {callback('Async task completed');}, 1000);
}asyncTask((result) => {console.log(result);
});

 

Promise

Promise是ES6引入的一种异步编程解决方案。它是一个对象,代表了一个异步操作的最终完成(或失败)及其结果值。

let promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Promise resolved');}, 1000);
});promise.then((result) => {console.log(result);
}).catch((error) => {console.log(error);
});

Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。Promise对象的状态一旦改变,就不会再变,任何时候都可以得到这个结果。

 

Async/Await

Async/Await是ES7引入的一种新的异步编程解决方案,它是基于Promise的。Async/Await使得异步代码看起来像同步代码,更易于理解和维护。

async function asyncTask() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('Async task completed');}, 1000);});
}async function run() {let result = await asyncTask();console.log(result);
}run();

Async函数返回一个Promise对象,可以使用then方法添加回调函数。Await表达式会暂停async函数的执行,等待Promise的解决,然后恢复async函数的执行并返回解决值。

 

错误处理

在异步编程中,错误处理是一个重要的问题。Promise提供了catch方法来捕获错误,Async/Await可以使用try/catch来捕获错误。

async function asyncTask() {throw new Error('Async task error');
}async function run() {try {let result = await asyncTask();console.log(result);} catch (error) {console.log(error);}
}run();

并发和并行

Promise.all和Promise.race可以用来处理并发和并行任务。

let promise1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('Promise 1 resolved');}, 1000);
});let promise2 = new Promise((resolve, reject) => {setTimeout(() => {resolve('Promise 2 resolved');}, 2000);
});Promise.all([promise1, promise2]).then((results) => {console.log(results);
});Promise.race([promise1, promise2]).then((result) => {console.log(result);
});

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

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

相关文章

什么生信流程语言让你极度爽?

生信流程搭建有多难?行业为解决这一问题提出了各种各样的配方,有你熟悉的吗? 一、困境 - 乱 无数机构投入大量人力物力,以期获得一条条可用的生信流程。而有些流程,由于种种原因,存在着巨大的缺陷&#xf…

安全风险 - 切换后台时背景模糊处理

因为安全风险中提到当app处于后台卡片状态时,显示的卡片页面应该为模糊效果,否则容易泄露用户隐私,尤其当前页涉及个人信息、资产信息等,都会造成信息泄露!基于这种场景,我研究了下这种业务下的模糊效果 找…

普通函数的参数中的auto

2.1 普通函数的参数中的auto 从c14起&#xff0c;lambda可以使用auto占位符声明或者定义参数: auto printColl [] (const auto& coll) // generic lambda{ for (const auto& elem : coll) {std::cout << elem << \n;}} 只要支持Lambda 内部的操作&…

【OS】AUTOSAR Os是如何启动第一个Task的

目录 前言 正文 1.总体概览及背景介绍 1.1. Os默认的Hook配置 1.2 用户Task的配置

Golang创建文件夹

方法 package zdpgo_fileimport ("os" )// AddDir 创建文件夹 func AddDir(dir string) error {if !IsExist(dir) {return os.MkdirAll(dir, os.ModePerm)}return nil }测试 package zdpgo_fileimport "testing"func TestAddDir(t *testing.T) {data : […

第八届“英拿科技杯”上海高校金马程序设计联赛暨东华大学邀请赛

第八届“英拿科技杯”上海高校金马程序设计联赛暨东华大学邀请赛 仪表盘所有提交榜单 I. 孤星 单点时限: 2.0 sec 内存限制: 512 MB &#x1d45b;(1≤103) 个干员&#xff0c;每个干员工资为 &#x1d464;&#x1d456;(1≤&#x1d464;&#x1d456;≤105)&#xff0c;贡献…

JAVA云HIS医院系统源码 HIS源码:云HIS系统与SaaS的关系

云HIS系统与SaaS的关系 云HIS系统是一种基于云计算技术的医院信息系统&#xff0c;它采用B/S架构&#xff0c;通过云端SaaS服务的方式提供。用户可以通过浏览器访问云HIS系统&#xff0c;无需关注系统的部署、维护、升级等问题。云HIS系统通常具有模板化、配置化、智能化等特点…

react记录部署

导语 React中的核心概念 1 虚拟DOM&#xff08;Virtual DOM&#xff09; 2 Diff算法&#xff08;虚拟DOM的加速器&#xff0c;提升React性能的法宝&#xff09; React主要的原理 Virtual DOM 虚拟DOM; 提供了一种不同的而又强大的方式来更新DOM&#xff0c; 代替直接的DOM操…

cuda11.8安装torch2.0.1

pip install torch2.0.1 torchvision0.15.2 torchaudio2.0.2 --index-url https://download.pytorch.org/whl/cu118

hot100 -- 回溯(上)

目录 &#x1f35e;科普 &#x1f33c;全排列 AC DFS &#x1f6a9;子集 AC DFS &#x1f382;电话号码的字母组合 AC DFS &#x1f33c;组合总和 AC DFS &#x1f35e;科普 忘记 dfs 的&#xff0c;先看看这个&#x1f447; DFS&#xff08;深度优先搜索&#xf…

百度软件测试面试经历,期望薪资27K

一面 1、 请为百度搜索框设计测试用例&#xff1f; 2、百度设计框上线前需要进行那些测试&#xff1f; 界面测试&#xff0c;功能测试&#xff0c;性能测试&#xff0c;安全性测试&#xff0c;易用性测试&#xff0c;兼容性测试&#xff0c;UI测试。 3、如何查看http状态码…

重学java 38.创建线程的方式⭐

It is during our darkest moments that we must focus to see the light —— 24.5.24 一、第一种方式_继承extends Thread方法 1.定义一个类,继承Thread 2.重写run方法,在run方法中设置线程任务(所谓的线程任务指的是此线程要干的具体的事儿,具体执行的代码) 3.创建自定义线程…

基于灰狼优化算法优化支持向量机(GWO-SVM)回归预测

代码原理 基于灰狼优化算法优化支持向量机&#xff08;GWO-SVM&#xff09;的回归预测代码的原理和流程如下&#xff1a; 1. **初始化灰狼群体**&#xff1a;随机生成一定数量的灰狼&#xff0c;并初始化它们的位置和速度。 2. **初始化SVM模型参数**&#xff1a;根据问题要…

【JAVA基础之网络编程】UDP和TCP协议以及三次握手和四次挥手的过程

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;mysql专栏&#xff1a;小林同学的专栏 目录 1. 网络编程 1.1 概述 1.2 网络编程的三要素 1.2.1 IP地址 1.2.2 InetAddress 1.2.3 端口和协议 1.3 UDP协议 1.3.1 UDP发送数据 1.3.2 UDP接收数据 1.4…

C语言——小知识和小细节18

一、力扣题目 1、题目本体 2、题解 本题目我们使用异或分组的方法来解决。可以在我之前的文章《C语言——操作符CSDN博客》中看一下异或的特点。 由于异或的运算规则为相同为0&#xff0c;不同为1&#xff0c;而且是在二进制补码上进行操作的&#xff0c;我们可以发现的一个…

c++|多态

c|多态 1 多态的概念2 多态的定义及其实现2.1 满足多态的条件2.2 虚函数2.3 虚函数的重写2.4 析构函数适合加virtural吗2.4 C11 override 和 final2.5 三个概念的对比 3 多态的原理4 抽象类4.1 概念4.2 纯虚函数 1 多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是…

2413. 最小偶倍数

题目&#xff1a; 给你一个正整数 n &#xff0c;返回 2 和 n 的最小公倍数&#xff08;正整数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;n 5 输出&#xff1a;10 解释&#xff1a;5 和 2 的最小公倍数是 10 。 示例 2&#xff1a; 输入&#xff1a;n 6 输出&a…

JS 手写 节流throttle 防抖debounce函数

防抖debounce // 手写防抖 function debounce(fn, delay 200) {// timer 在闭包中let timer null// 返回一个函数return function(...args) {if (timer) {clearTimeout(timer) // 清空上次的值}timer setTimeout(() > {fn.apply(this, args) // 透传 this 和函数参数},…

【再探】设计模式—代理模式

代理是指授权代理人在一定范围内代表其向第三方进行处理有关事务。 1 代理模式 需求&#xff1a;1&#xff09;将业务代码与非业务代码分离&#xff0c;在不改变代码结构的基础上&#xff0c;为其添加新的功能。2&#xff09;为系统中的某些操作做同一处理&#xff0c;例如进…

[实例] Unity Shader 逐像素漫反射与半兰伯特光照

漫反射光照是Unity中最基本最简单的光照模型&#xff0c;本篇将会介绍在片元着色器中实现反射效果&#xff0c;并会采用半兰伯特光照技术对其进行改进。 1. 逐顶点光照与逐像素光照 在Unity Shader中&#xff0c;我们可以有两个地方可以用来计算光照&#xff1a;在顶点着色器…