前端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://xiahunao.cn/news/2780120.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

15 ABC基于状态机的按键消抖原理与状态转移图

1. 基于状态机的按键消抖 1.1 什么是按键? 从按键结构图10-1可知,按键按下时,接点(端子)与导线接通,松开时,由于弹簧的反作用力,接点(端子)与导线断开。 从…

一键打造属于自己漏扫系统

0x01 工具介绍 本系统是对Web中间件和Web框架进行自动化渗透的一个系统,根据扫描选项去自动化收集资产,然后进行POC扫描,POC扫描时会根据指纹选择POC插件去扫描,POC插件扫描用异步方式扫描.前端采用vue技术,后端采用python fastapi。 0x02 安装与使用 1、Docker部署环境 编译…

MongoDB 与 mongo-express docker 安装

MongoDB 和 mongo-express 与 MySQL 不同,MongoDB 为 NoSQL 数据库,MongoDB 中没有 table ,schema 概念,取而代之的 collection,其中 collection 存储的为 BSON 格式,是一种类似于 JSON 的用于存储 k-v 键…

案例:CentOS8 在 MySQL8.0 实现半同步复制

异步复制 MySQL 默认的复制即是异步的,主库在执行完客户端提交的事务后会立即将结果返给给客户端,并不关心从库是否已经接收并处理,这样就会有一个问题,主节点如果 crash 掉了,此时主节点上已经提交的事务可能并没有传…

Blazor SSR/WASM IDS/OIDC 单点登录授权实例3-服务端管理组件

目录: OpenID 与 OAuth2 基础知识Blazor wasm Google 登录Blazor wasm Gitee 码云登录Blazor SSR/WASM IDS/OIDC 单点登录授权实例1-建立和配置IDS身份验证服务Blazor SSR/WASM IDS/OIDC 单点登录授权实例2-登录信息组件wasmBlazor SSR/WASM IDS/OIDC 单点登录授权实例3-服务端…

Vue源码系列讲解——模板编译篇【二】(模板解析阶段)

目录 1. 整体流程 2. 回到源码 3. 总结 1. 整体流程 上篇文章中我们说了&#xff0c;在模板解析阶段主要做的工作是把用户在<template></template>标签内写的模板使用正则等方式解析成抽象语法树&#xff08;AST&#xff09;。而这一阶段在源码中对应解析器&…

使用Cargo创建、编译与运行Rust项目

在 Rust 开发中&#xff0c;Cargo 是一个非常重要的工具&#xff0c;它负责项目的构建、管理和依赖管理。以下是如何使用 Cargo 创建、编译和运行 Rust 项目的详细步骤。 1. 创建新项目 首先确保你已经在计算机上安装了 Rust 和 Cargo。然后&#xff0c;在命令行中输入以下命…

【网站项目】028蜀都天香酒楼管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

vue核心技术(二)

◆ 指令补充 指令修饰符 通过 "." 指明一些指令 后缀&#xff0c;不同 后缀 封装了不同的处理操作 → 简化代码 v-bind 对于样式控制的增强 为了方便开发者进行样式控制&#xff0c; Vue 扩展了 v-bind 的语法&#xff0c;可以针对 class 类名 和 style 行内样式…

图像处理之《隐写网络的隐写术》论文阅读

一、文章摘要 隐写术是一种在双方之间进行秘密通信的技术。随着深度神经网络(DNN)的快速发展&#xff0c;近年来越来越多的隐写网络被提出&#xff0c;并显示出良好的性能。与传统的手工隐写工具不同&#xff0c;隐写网络的规模相对较大。如何在公共信道上秘密传输隐写网络引起…

甘肃旅游服务平台:技术驱动的创新实践

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

【Effective Objective - C 2.0】——读书笔记(一)

文章目录 前言一、了解Objective-C语言的起源OC的起源运行期组件和内存管理 二、在类的头文件中尽量少引入其他头文件尽量延后引入头文件或者单独开辟一个文件向前声明 三、多用字面量语法&#xff0c;少用与之等价的方法四、多用类型常量&#xff0c;少用#define预处理指令五、…

synchronized 浅读解析 一

引言 在学习synchronized前&#xff0c;我们实际上是需要先了解Java对象在jvm中的储存结构&#xff0c;在了解了它的实际储存方式后&#xff0c;再对后边的锁学习会有一个更好更深入的理解。 一、对象结构 我们为什么要知道什么是对象头 在学习synchronized的时候&#xff0c…

Java 集合、迭代器

Java 集合框架主要包括两种类型的容器&#xff0c;一种是集合&#xff08;Collection&#xff09;&#xff0c;存储一个元素集合&#xff0c;另一种是图&#xff08;Map&#xff09;&#xff0c;存储键/值对映射。Collection 接口又有 3 种子类型&#xff0c;List、Set 和 Queu…

P1028 [NOIP2001 普及组] 数的计算题解

题目 给出正整数n&#xff0c;要求按如下方式构造数列&#xff1a; 只有一个数字n的数列是一个合法的数列。在一个合法的数列的末尾加入一个正整数&#xff0c;但是这个正整数不能超过该数列最后一项的一半&#xff0c;可以得到一个新的合法数列。 请你求出&#xff0c;一共…

vtk三维场景基本要素 灯光、相机、颜色、纹理映射 简介

整理一下VTK 三维场景基本要素&#xff0c;后面会一一进行整理&#xff1b; 1. 灯光 vtkLight 剧场里有各式各样的灯光&#xff0c;三维渲染场景中也一样&#xff0c;可以有多个灯光存在。灯光和相机 是三维渲染场景必备的要素&#xff0c;vtkRenderer会自动创建默认的灯光和…

24个已知403绕过方法的利用脚本

介绍 一个简单的脚本&#xff0c;仅供自用&#xff0c;用于绕过 403 在curl的帮助下使用24个已知的403绕过方法 它还可用于比较各种条件下的响应&#xff0c;如下图所示 用法 ./bypass-403.sh https://example.com admin ./bypass-403.sh website-here path-here 安装 git …

opencv图像像素的读写操作

void QuickDemo::pixel_visit_demo(Mat & image) {int w image.cols;//宽度int h image.rows;//高度int dims image.channels();//通道数 图像为灰度dims等于一 图像为彩色时dims等于三 for (int row 0; row < h; row) {for (int col 0; col < w; col) {if…

[ai笔记1] 借着“ai春晚”开个场

1 文思ai笔记-新的开始 今天是2024年2月29日&#xff0c;也是传统农历的除夕夜。早起在ai圈看到一个比较新奇的消息&#xff0c;ai春晚今日举办&#xff0c;竟然有一点小小的激动。这些年确实好久没看过春晚了&#xff0c;自己对于春晚的映像还停留在“白云黑土”、“今天&…

AI修复历史人物 图像转真人 绝密档案

修复李白 开启control 不要点爆炸小按钮 权重建议&#xff1a;0.7-1.2 采样&#xff1a;DPM SDE Karras 如果人眼不好&#xff0c;开启高清修复&#xff0c;进行2次尝试 高难度 修复张居正 softhed 1 lineart_真实 1 适当调整lineart进入值。 如果效果不好&#xff…