前端JavaScript篇之异步编程的实现方式?

目录

  • 异步编程的实现方式?
    • 1. 回调函数
    • 2. Promise
    • 3. Async/Await
    • 4. Generator


异步编程的实现方式?

异步编程是处理需要等待的操作的一种方式,比如读取文件、发送网络请求或处理大量数据。在JavaScript中,有几种常见的实现方式:

1. 回调函数

回调函数是一种处理异步操作的传统方式,通过将函数作为参数传递给另一个函数,在异步操作完成后执行这个函数。

特点:可能导致回调地狱(callback hell),使代码难以维护和理解。

function fetchData(callback) {setTimeout(() => {const data = 'Some async data'callback(data)}, 1000)
}fetchData(data => {console.log(data) // 处理获取的数据
})

请添加图片描述

将一个函数作为参数传递给另一个函数,在异步操作完成后调用这个函数。
注意事项: 可能会导致回调地狱(callback hell),使代码难以维护。

2. Promise

Promise是一种更结构化和灵活的处理异步操作的方式,它代表一个异步操作最终会产生的值或原因。

特点:可以链式调用.then()和.catch(),使得异步操作的处理更加清晰和可控。

function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {const data = 'Some async data'resolve(data)}, 1000)})
}fetchData().then(data => {console.log(data) // 处理获取的数据}).catch(error => {console.error(error) // 错误处理})

请添加图片描述
使用Promise对象处理异步操作,可以更结构化和灵活地管理多个异步操作。
注意事项: 需要小心处理Promise链中的错误和异常情况,避免未捕获的异常。

3. Async/Await

Async/Await建立在Promise之上,是一种更直观、更像同步代码的异步编程方式,使用async和await关键字。
特点:通过await等待Promise对象的解决,使得异步代码看起来更加清晰和易于理解。

async function fetchData() {try {let data = await fetch('https://api.example.com/data')console.log(data) // 处理获取的数据} catch (error) {console.error(error) // 错误处理}
}
// 使用Async/Await处理异步操作的简单案例// 模拟一个返回Promise的异步函数
function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms))
}// 异步函数使用async关键字声明
async function asyncExample() {console.log('Start') // 同步操作try {await delay(2000) // 等待2秒,模拟异步操作console.log('Async operation completed') // 等待完成后的操作} catch (error) {console.error('Error:', error) // 捕获可能出现的错误}
}// 调用异步函数
asyncExample()
console.log('After asyncExample') // 异步函数调用后的操作

请添加图片描述

在这个案例中,asyncExample函数使用了async关键字声明,内部使用await等待一个模拟的异步操作。当调用asyncExample时,它会立即执行,并在遇到await关键字时暂停执行,直到delay函数返回的Promise状态变为resolved。这样使得异步代码看起来更像同步代码,易于理解和维护。

基于Promise的语法糖,使得异步代码看起来更像同步代码。
注意事项: 需要在包含await的函数前加上async关键字,并合理处理可能出现的错误。

4. Generator

Generator函数是ES6引入的特殊函数,可以暂停并恢复执行过程。它通过yield关键字实现暂停和生成一系列值。

特点:需要手动管理执行过程,通常与迭代器一起使用,用于实现惰性求值和异步编程。

function* asyncGenerator() {const result = yield fetchData()console.log(result)
}function fetchData() {return new Promise(resolve => {setTimeout(() => resolve('Async data'), 1000)})
}const gen = asyncGenerator()
const promise = gen.next().value
promise.then(data => gen.next(data))

请添加图片描述

使用Generator函数来实现异步编程,通过yield暂停函数执行。
注意事项: 需要手动管理Generator函数的执行,包括调用next()方法并处理返回的结果。

持续学习总结记录中,回顾一下上面的内容:
回调函数是传统的异步处理方式,可能导致代码难以维护。
Promise提供了更清晰、结构化的异步处理方式,并支持链式调用。
Async/Await是基于Promise的语法糖,使得异步代码更像同步代码,更易于理解。
Generator是一种特殊的函数,可用于实现暂停和生成值,需要手动管理执行过程。
每种方式都有其适用的场景和优劣点。根据具体的需求和项目,选择合适的方式来处理异步操作非常重要。
在处理异步操作时,需要注意错误处理、代码可读性和维护性。

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

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

相关文章

《UE5_C++多人TPS完整教程》学习笔记1 ——《P2 关于本课程(About This Course)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P2 关于本课程(About This Course)》 的学习笔记,该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版,UP主(也是译者&…

ubuntu中尝试安装ros2

首先,ubuntu打开后有个机器人栏目,打开后,有好多可选的,看了半天 ,好像是博客,算了,没啥关系,再看看其他菜单 这些都不是下载链接。先不管,考虑了一下,问了ai&#xff…

数据库恢复

文章目录 前言一、事务1.概念2.定义语句3.ACID特性 二、数据库恢复的必要性1.为什么要进行数据库恢复2.数据库恢复机制的作用 三、数据恢复使用的技术1.数据转储2.登记日志文件 四 、不同故障的数据恢复策略1.事务内部的故障2.系统故障3.介质故障 五、具有检查点的恢复技术1.检…

接口测试--apipost接口断言详解

在做接口测试的时候,会对接口进行断言,一个完整的接口测试,包括:请求->获取响应正文->断言。 一、apipost如何进行断言 apipost的断言设置实在后执行脚本中进行编写的。apipost本身提供了11中断言: apt.asser…

利用Python和pandas库进行股票技术分析:移动平均线和MACD指标

利用Python和pandas库进行股票技术分析:移动平均线和MACD指标 介绍准备工作数据准备计算移动平均线计算MACD指标结果展示完整代码演示 介绍 在股票市场中,技术分析是一种常用的方法,它通过对股票价格和交易量等历史数据的分析,来…

单片机学习笔记---蜂鸣器播放提示音音乐(天空之城)

目录 蜂鸣器播放提示音 蜂鸣器播放音乐(天空之城) 准备工作 主程序 中断函数 上一节讲了蜂鸣器驱动原理和乐理基础知识,这一节开始代码演示! 蜂鸣器播放提示音 先创建工程:蜂鸣器播放提示音 把我们之前模块化的…

【机器学习】数据清洗之识别异常点

🎈个人主页:甜美的江 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:机器学习 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步…

Modern C++ 内存篇2 - 关于relocation的思考

在上一节《Modern C 内存篇1 - std::allocator VS pmr-CSDN博客》我们详细讨论了关于如何判断用不用memmove优化的代码,结论可以总结为: 只有_Tp是trivial 且 用std::allocator 才会调用memmove。 所有case如下表格所示: No_Tpallocator typ…

渗透专用虚拟机(公开版)

0x01 工具介绍 okfafu渗透虚拟机公开版。解压密码:Mrl64Miku,压缩包大小:15.5G,解压后大小:16.5G。安装的软件已分类并在桌面中体现,也可以使用everything进行查找。包含一些常用的渗透工具以及一些基本工…

C语言rand随机数知识解析和猜数字小游戏

rand随机数 rand C语言中提供了一个可以随机生成一个随机数的函数&#xff1a;rand&#xff08;&#xff09; 函数原型&#xff1a; int rand(void);rand函数返回的值的区间是&#xff1a;0~RAND_MAX(32767)之间。大部分编译器都是32767。 #include<stdlib.h> int ma…

VTK 三维场景的基本要素(相机) vtkCamera

观众的眼睛好比三维渲染场景中的相机&#xff0c;在VTK中用vtkCamera类来表示。vtkCamera负责把三维场景投影到二维平面&#xff0c;如屏幕&#xff0c;相机投影示意图如下图所示。 1.与相机投影相关的要素主要有如下几个&#xff1a; 1&#xff09;相机位置: 相机所处的位置…

EMC学习笔记(二十四)降低EMI的PCB设计指南(四)

降低EMI的PCB设计指南&#xff08;四&#xff09; 1.电路板分区2.信号走线2.1 电容和电感串扰2.2 天线2.3 端接和传输线2.4输入端的阻抗匹配 tips&#xff1a;资料主要来自网络&#xff0c;仅供学习使用。 1.电路板分区 电路板分区与电路板平面规划具有相同的基本含义&#x…

Java常用类与基础API--String的实例化与连接操作

文章目录 一、String实例化的两种方式&#xff08;1&#xff09;两种方式&#xff08;2&#xff09;举例1、案例12、案例2 &#xff08;3&#xff09;内存分配&#xff08;4&#xff09;面试题1、题12、题2 二、String的连接操作&#xff08;1&#xff09;案例1、案例剖析2、in…

Linux--目录结构

目录 一、Linux的目录结构二、常用的目录介绍 一、Linux的目录结构 Linux的目录结构是一个树型结构。 Windos 系统可以拥有多个盘符&#xff0c;如C盘&#xff0c;D盘,E盘。 Linux 木有盘符这个概念&#xff0c;只有一个根目录 /&#xff08;相当于文件夹&#xff09;&#xf…

苍穹外卖实操笔记六---缓存商品,购物车功能

苍穹外卖实操笔记六—缓存商品&#xff0c;购物车功能 一.缓存菜品 可以使用redis进行缓存&#xff1b;另外&#xff0c;在实现缓存套餐时可以使用spring cache提高开发效率&#xff1b;   通过缓存数据&#xff0c;降低访问数据库的次数&#xff1b; 使用的缓存逻辑&#…

【开源】基于JAVA+Vue+SpringBoot的公司货物订单管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 客户管理模块2.2 商品维护模块2.3 供应商管理模块2.4 订单管理模块 三、系统展示四、核心代码4.1 查询供应商信息4.2 新增商品信息4.3 查询客户信息4.4 新增订单信息4.5 添加跟进子订单 五、免责说明 一、摘要 1.1 项目…

Stable Diffusion 模型下载:DreamShaper(梦想塑造者)

文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 DreamShaper 是一个分格多样的大模型&#xff0c;可以生成写实、原画、2.5D 等多种图片&#xff0c;能生成很棒的人像和风景图。 条目内容类型大模型基础模型SD 1…

Elasticsearch:使用查询规则(query rules)进行搜索

在之前的文章 “Elasticsearch 8.10 中引入查询规则 - query rules”&#xff0c;我们详述了如何使用 query rules 来进行搜索。这个交互式笔记本将向你介绍如何使用官方 Elasticsearch Python 客户端来使用查询规则。 你将使用 query rules API 将查询规则存储在 Elasticsearc…

HTTP网络通信协议基础

目录 前言&#xff1a; 1.HTTP协议理论 1.1协议概念 1.2工作原理 2.HTTP抓包工具 2.1Fiddler工具 2.2抓包原理 3.HTTP协议格式 3.1HTTP请求 3.2HTTP响应 3.3格式总结 前言&#xff1a; 在了解完网络编程的传输层UDP和TCP通信协议后&#xff0c;就需要开始对数据进行…

mac卸载被锁定的app

sudo chflags -hv noschg /Applications/YunShu.app 参考&#xff1a;卸载云枢&#xff08;MacOS 版&#xff09;