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

news2024/10/5 19:17:40

目录

  • 异步编程的实现方式?
    • 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.coloradmin.cn/o/1445189.html

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

相关文章

工业制造:分布式控制系统(DCS),一文掌握。

一、什么是DCS 在工业制造领域,DCS 是分布式控制系统(Distributed Control System)的缩写。DCS 是一种用于监控和控制工业生产过程的自动化系统,通常由一组分布在工厂各个位置的控制单元和计算机组成,用于实时监测和控…

面试经典150题——三数之和

​"The road to success and the road to failure are almost exactly the same." - Colin R. Davis 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力方法 因为三个数相加为0,那么说明其中两个加数的和与另一个加数为相反数则满足题意。所以可以得到…

QT入门-基本控件

1.QTextEdit qt助手查看可知一些信息,其余信息见全文 1.1 functions public function如下: 使用时通过QT助手查找 实例: #include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new …

第73左侧菜单实现

layout下面新建menu layout index.vue导入menu import Menu from /views/layout/menu菜单实现&#xff1a; <template><el-menuactive-text-color"#ffd04b"background-color"#2d3a4b"class"el-menu-vertical-demo"default-active&quo…

apk反编译修改教程系列---简单修改apk默认横竖屏显示 手机端与电脑端同步演示【十一】

往期教程&#xff1a; apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…

C语言 服务器编程-日志系统

日志系统的实现 引言最简单的日志类 demo按天日志分类和超行日志分类日志信息分级同步和异步两种写入方式 引言 日志系统是通过文件来记录项目的 调试信息&#xff0c;运行状态&#xff0c;访问记录&#xff0c;产生的警告和错误的一个系统&#xff0c;是项目中非常重要的一部…

02.数据结构

一、链表 作用&#xff1a;用于写邻接表&#xff1b; 邻接表作用&#xff1a;用于存储图或树&#xff1b; 1、用数组模拟单链表 #include<iostream> using namespace std;const int N 100010;// head 表示头结点的下标 // e[i] 表示结点i的值 // ne[i] 表示结点i的ne…

python适配器模式开发实践

1. 什么是适配器设计模式&#xff1f; 适配器&#xff08;Adapter&#xff09;设计模式是一种结构型设计模式&#xff0c;它允许接口不兼容的类之间进行合作。适配器模式充当两个不兼容接口之间的桥梁&#xff0c;使得它们可以一起工作&#xff0c;而无需修改它们的源代码。 …

数字孪生:构建未来智慧社区的关键技术

随着科技的快速发展&#xff0c;数字孪生技术作为构建未来智慧社区的关键技术&#xff0c;正逐渐受到广泛关注。数字孪生技术能够实现物理世界与数字世界的交互映射&#xff0c;为智慧社区的建设提供强有力的支持。本文将探讨数字孪生技术在构建未来智慧社区中的作用和意义&…

蓝牙BLE学习

1. 简介 1.1 蓝牙发展历程 蓝牙&#xff0c;直接来自于一位国王的名字--King Harald ‘Bluetooth Gromsson。这位国王因两件事留名于史&#xff0c;其一是在公园958年统一了丹麦和挪威&#xff0c;其二是在其死后&#xff0c;其牙齿呈现出暗蓝色的颜色&#xff0c;因而得名蓝牙…

【Tauri】(1):使用Tauri1.5版本,进行桌面应用开发,在windows,linux进行桌面GUI应用程序开发,可以打包成功,使用 vite 最方便

1&#xff0c;视频地址&#xff1a; https://www.bilibili.com/video/BV1Pz421d7s4/ 【Tauri】&#xff08;1&#xff09;&#xff1a;使用Tauri1.5版本&#xff0c;进行桌面应用开发&#xff0c;在windows&#xff0c;linux进行桌面GUI应用程序开发&#xff0c;可以打包成功&…

Educational Codeforces Round 135 (Rated for Div. 2)C. Digital Logarithm(思维)

文章目录 题目链接题意题解代码 题目链接 C. Digital Logarithm 题意 给两个长度位 n n n的数组 a a a、 b b b&#xff0c;一个操作 f f f 定义操作 f f f为&#xff0c; a [ i ] f ( a [ i ] ) a [ i ] a[i]f(a[i])a[i] a[i]f(a[i])a[i]的位数 求最少多少次操作可以使 …

电路设计(16)——纪念馆游客进出自动计数显示器proteus仿真

1.设计要求 设计、制作一个纪念馆游客进出自动计数显示器。 某县&#xff0c;有一个免费参观的“陶渊明故里纪念馆”&#xff0c;游客进出分道而行&#xff0c;如同地铁有确保单向通行的措施。在入口与出口处分别设有红外检测、声响、累加计数器装置&#xff0c;当游人进&#…

fast.ai 机器学习笔记(一)

机器学习 1&#xff1a;第 1 课 原文&#xff1a;medium.com/hiromi_suenaga/machine-learning-1-lesson-1-84a1dc2b5236 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自机器学习课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这些笔记将继续更…

【蓝桥杯省赛真题23】python水仙花数 青少年组蓝桥杯比赛python编程省赛真题解析

目录 python水仙花数 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python水仙花数 第十二届蓝桥杯青少年组python比赛省赛真题 一、题目要求…

【ES6】模块化

nodejs遵循了CommonJs的模块化规范 导入 require() 导出 module.exports 模块化的好处&#xff1a; 模块化可以避免命名冲突的问题大家都遵循同样的模块化写代码&#xff0c;降低了沟通的成本&#xff0c;极大方便了各个模块之间的相互调用需要啥模块&#xff0c;调用就行 …

年底总结:野生码农与辉煌的2023

目录 始于兴趣终与坚持成于热爱2024 flag 始于兴趣 那是在遥远的2018年&#xff0c;我从机械行业跨入IT领域&#xff0c;当时觉得写代码非常酷的事&#xff0c;而且开发出来的功能可以提高机械制造效率&#xff0c;那种成就感油然而生。展望着未来&#xff0c;我觉得自己或许正…

8.【CPP】Vector(扩容问题||迭代器失效问题简述迭代器的种类)

vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的&#xff0c;而且它的大小会被容器自…

大数据Doris(六十五):基于Apache Doris的数据中台2.0

文章目录 基于Apache Doris的数据中台2.0 一、​​​​​​​架构升级

117.乐理基础-五线谱-音值组合法(二)

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;116.乐理基础-五线谱-音值组合法&#xff08;一&#xff09;-CSDN博客 分母大于等于八的所有拍号的音值组合法&#xff0c;对于这些大于等于八的&#xff0c;可以用一句话来形容&#xff0c;那就是叫做&#xff0c…