【Web前端】从回调到现代Promise与Async/Await

异步编程是一种让程序能够在等待某些操作完成的同时继续执行其他任务的关键技术，打破了传统编程中顺序执行代码的束缚。这种编程范式允许开发者构建出能够即时响应用户操作、高效处理网络请求和资源加载的应用程序。通过异步编程，JavaScript 能够在执行耗时操作（如数据库查询、文件读写或网络通信）时，不阻塞主线程，从而保持应用的流畅性和响应性。这种能力对于构建现代Web应用至关重要，因为它使得程序能够在等待异步任务完成的过程中，继续处理用户输入、更新界面或执行其他后台任务，极大地提升了用户体验和系统的整体性能。异步编程的核心在于事件循环和回调机制，共同构成了 JavaScript 异步操作的基础，使得开发者能够以更加灵活和高效的方式管理程序的执行流程。​

一、同步编程：一条单行道

什么是同步编程？

同步编程是一种编程范式，其中程序的执行是顺序的，即代码块按照它们在源代码中出现的顺序依次执行。在同步编程模型中，当一个函数或操作被调用时，它将阻塞调用它的代码的执行，直到该函数或操作完成并返回结果。这意味着在等待函数执行完成之前，程序不会继续执行后续的代码。

同步编程的特点：

  1. 顺序执行：代码按照编写的顺序依次执行，每个操作完成后才会进行下一个操作。
  2. 阻塞调用者：函数调用会阻塞调用它的代码，直到函数执行完毕。
  3. 等待结果：调用者必须等待函数返回结果后才能继续执行。

一个耗时的同步函数示例：

以下是一个简单的同步函数，它模拟了一个耗时的计算过程：

function calculateLargeNumber() {let result = 0;for (let i = 0; i < 1000000000; i++) {result += i;}return result;
}console.log(calculateLargeNumber()); // 这将花费很长时间

在这个例子中，​​calculateLargeNumber​​​ 函数执行了一个非常大的循环，计算了从 0 到 999999999 的累加和。这个过程非常耗时，如果在一个网页或应用程序中调用这个函数，它将导致用户界面冻结，因为浏览器的主线程被这个长时间运行的函数阻塞了。

耗时同步函数的问题：

当同步函数执行时间过长时，会引发以下问题：

  • 阻塞UI线程：在浏览器中，UI线程负责处理用户界面的更新。如果UI线程被长时间运行的同步函数阻塞，用户界面将无法响应用户的操作，导致界面冻结。
  • 用户体验下降：用户可能会遇到界面卡顿、无响应的情况，这会严重影响用户体验，并可能导致用户流失。
  • 资源浪费：长时间运行的同步函数会占用大量的CPU资源，导致其他任务无法高效执行，从而降低整体性能。

为了解决这些问题，异步编程被引入，它允许程序在等待某些操作完成时继续执行其他任务，从而提高程序的响应性和效率。

二、异步编程：并行世界的钥匙

什么是异步编程？

异步编程是一种编程范式，它允许程序在执行一个可能需要较长时间完成的任务时，不会阻塞当前执行流程，从而可以继续处理其他任务或响应用户交互。在异步编程中，程序不会等待某个操作完成后再继续执行，而是立即返回，允许其他代码在等待操作完成的同时运行。

异步编程的核心概念：

  • 非阻塞：异步操作不会阻塞调用它的代码，程序可以继续执行其他任务。
  • 事件驱动：异步编程通常与事件驱动模型结合使用，即程序通过监听事件来响应外部触发的事件。
  • 回调函数：异步操作通常通过回调函数来处理结果，当操作完成时，回调函数会被执行。
  • Promise：Promise 是一种更现代的异步编程模式，它提供了一个更好的方式来处理异步操作的结果。
  • 异步函数：ES2017 引入了异步函数，它允许使用 ​​async​​ 和 ​​await​​​ 关键字来编写看起来像同步代码的异步操作。

异步编程的必要性：

异步编程在许多场景中都是必要的，尤其是在以下情况下：

  1. 网络请求：使用 ​​fetch()​​ 等API发起 HTTP 请求时，网络延迟可能会很长，如果使用同步编程，将会阻塞UI线程，导致界面无响应。
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
  1. 访问硬件设备：使用 ​​getUserMedia()​​ 访问用户的摄像头和麦克风时，需要等待用户授权，这个过程是异步的。
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {// 使用 stream}).catch(error => {// 处理错误});
  1. 文件操作：使用 ​​showOpenFilePicker()​​​ 请求用户选择文件时，需要等待用户选择文件，这是一个异步过程。
showOpenFilePicker().then(fileHandle => {// 使用文件}).catch(error => {// 处理错误});

异步编程的重要性：

即使你不需要经常实现自己的异步函数，正确使用异步编程也是非常重要的。原因如下：

  • 提高性能：异步编程可以避免阻塞UI线程，从而提高应用程序的性能和响应性。
  • 改善用户体验：异步操作可以确保用户界面在等待操作完成时仍然可用，从而提供更好的用户体验。
  • 简化复杂逻辑：异步编程模式可以帮助简化涉及多个异步操作和回调的复杂逻辑。

异步编程是现代Web开发中不可或缺的一部分，它允许程序在执行长时间运行的任务时保持高效和响应。

三、事件处理程序：异步编程的基石

什么是事件处理程序？

事件处理程序是编程中用于响应特定事件发生时执行的一组代码。JavaScript 中事件处理程序是处理用户交互、浏览器行为或其他系统事件的关键机制。

事件处理程序的定义：

事件处理程序（也称为事件监听器或事件处理器）是一段代码，它被绑定到某个对象（如 HTML 元素）上，以便在特定事件发生时自动执行。事件可以是用户操作（如点击、按键、鼠标移动等），也可以是浏览器内部的事件（如页面加载完成、窗口大小改变等）。

事件监听器：

事件监听器是用于添加事件处理程序的机制。在 JavaScript 中，你可以使用 ​​addEventListener​​ 方法来为元素添加事件监听器。以下是如何为按钮点击事件添加事件监听器的示例：

document.getElementById('myButton').addEventListener('click', function() {console.log('按钮被点击了！');
});

​​addEventListener​​ 方法被用来为具有 ID ​​myButton​​ 的按钮添加一个点击事件监听器。当按钮被点击时，匿名函数中的代码将被执行，控制台将输出 "按钮被点击了！"。

事件循环：

JavaScript 的执行环境使用事件循环来处理异步事件。事件循环的工作原理如下：

  1. 执行栈：JavaScript 的执行栈是按顺序执行代码的地方。当你在浏览器中编写 JavaScript 代码时，这些代码首先被推入执行栈。
  2. 事件队列：当事件发生时（例如用户点击按钮），事件会被添加到事件队列中。事件队列是一个按顺序存储待处理事件的列表。
  3. 事件处理：当执行栈为空时（即当前执行的函数执行完毕），事件循环会从事件队列中取出下一个事件，并调用相应的事件处理程序。

以下是事件循环的基本步骤：

  • 检查执行栈：JavaScript 引擎检查执行栈是否为空。
  • 处理事件：如果执行栈为空，事件循环从事件队列中取出一个事件。
  • 执行事件处理程序：事件循环调用事件处理程序，该程序可能执行异步操作。
  • 继续循环：事件循环继续检查执行栈是否为空，并重复上述步骤。

事件处理程序的使用场景：

  • 用户交互：响应用户的点击、按键、鼠标移动等操作。
  • 浏览器事件：处理页面加载完成、窗口大小改变、滚动事件等。
  • 网络请求：在异步网络请求完成后处理响应。

事件处理程序是 JavaScript 中实现异步编程和响应式编程的关键工具，它使得 JavaScript 能够创建出动态和交互式的网页应用。

四、回调：异步编程的早期解决方案

什么是回调？

回调（Callback）是函数式编程中的一个概念，它指的是将一个函数作为参数传递给另一个函数，并在适当的时候（通常是异步操作完成后）调用这个传递进来的函数。回调是一种常见的异步编程模式，它允许开发者处理异步操作的结果，而不会阻塞主线程的执行。

回调函数的示例：

以下是一个简单的回调函数的示例，它演示了如何使用回调来处理异步操作：

function fetchData(callback) {// 模拟异步操作，例如从服务器获取数据setTimeout(() => {const data = '这里是异步获取的数据';callback(data); // 在异步操作完成后调用回调函数}, 2000); // 假设异步操作需要2秒钟
}fetchData(function(data) {console.log(data); // 输出: 这里是异步获取的数据// 在这里可以继续处理data
});

在这个例子中，​​fetchData​​ 函数模拟了一个异步操作，它使用 ​​setTimeout​​ 来模拟延迟。当延迟结束后，它调用传递给它的回调函数 ​​callback​​，并传递操作的结果 ​​data​​。

回调地狱（Callback Hell）：

尽管回调函数是处理异步操作的一种有效方式，但过度使用回调会导致所谓的“回调地狱”。回调地狱是指在一个函数内部嵌套了多个回调函数，导致代码结构混乱、难以阅读和维护。

以下是一个回调地狱的示例：

fetchData(function(data) {console.log(data);fetchData(function(data) {console.log(data);fetchData(function(data) {console.log(data);// ...更多的回调嵌套});});
});

在这个例子中，每个回调函数都依赖于前一个回调函数的结果，这导致了代码的深度嵌套。当回调层次变得非常深时，代码的可读性和可维护性会大大降低。

回调地狱的解决方案：

为了解决回调地狱的问题，JavaScript 社区提出了多种解决方案，包括：

  • Promise：Promise 是一个对象，它代表了异步操作最终完成（或失败）时的结果。它提供了一种更简洁的方式来处理异步操作，并避免了回调嵌套。
  • async/await：ES2017 引入了 ​​async​​ 和 ​​await​​ 关键字，它们允许开发者以更接近同步代码的方式编写异步代码，从而避免了回调嵌套。

以下是一个使用 Promise 和 async/await 的示例：

// 使用 Promise
function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {const data = '这里是异步获取的数据';resolve(data);}, 2000);});
}fetchData().then(data => {console.log(data);// 继续处理数据
});// 使用 async/await
async function fetchDataAsync() {const data = await fetchData();console.log(data);// 继续处理数据
}fetchDataAsync();

这些解决方案使得异步代码更加清晰和易于管理，从而提高了代码的可读性和可维护性。

五、Promise：回调的替代品

什么是 Promise？

Promise 是 JavaScript 中用于处理异步操作的一种重要机制。它是一个对象，用于表示一个异步操作最终完成（或失败）时的结果。Promise 提供了一种更现代、更易于管理的异步编程方式，它解决了传统回调函数带来的“回调地狱”问题。

Promise 的核心概念：

  1. 状态：Promise 有三种状态，这些状态在 Promise 的生命周期中只能改变一次：
  • pending：初始状态，表示异步操作尚未完成。
  • fulfilled：操作成功完成，表示异步操作的结果已经可用。
  • rejected：操作失败，表示异步操作出现了错误。
  1. 构造函数：​​Promise​​ 是一个构造函数，用于创建一个新的 Promise 对象。它接受一个执行器函数（executor function），该函数接受两个参数：​​resolve​​ 和 ​​reject​​。​​resolve​​ 函数用于将 Promise 状态从 ​​pending​​ 改变为 ​​fulfilled​​，而 ​​reject​​ 函数用于将状态从 ​​pending​​ 改变为 ​​rejected​​。
  2. 链式调用：Promise 支持链式调用，这意味着你可以将多个 ​​.then()​​ 或 ​​.catch()​​ 方法链接在一起，以便在异步操作完成后按顺序执行多个操作。

使用 Promise 的示例：

以下是一个使用 Promise 的示例，它模拟了一个异步操作，例如从服务器获取数据：

function fetchData() {return new Promise((resolve, reject) => {// 模拟异步操作setTimeout(() => {const data = '这里是异步获取的数据';// 假设操作成功，调用 resolveresolve(data);// 如果操作失败，调用 reject// reject(new Error('发生错误'));}, 2000); // 假设异步操作需要2秒钟});
}// 使用 .then() 处理成功的结果
fetchData().then(data => {console.log(data); // 输出: 这里是异步获取的数据// 在这里可以继续处理 data
});// 使用 .catch() 处理失败的结果
fetchData().then(data => {console.log(data);
}).catch(error => {console.error('发生错误:', error);
});

例子中​​fetchData​​ 函数返回一个 Promise 对象。当异步操作成功完成时，​​resolve​​ 被调用，并且传递给 ​​.then()​​ 方法的回调函数将执行。如果异步操作失败，​​reject​​ 被调用，并且传递给 ​​.catch()​​​ 方法的回调函数将执行。

Promise 的优势：

  • 避免回调地狱：Promise 允许你以链式调用的方式处理异步操作，从而避免了回调嵌套的问题。
  • 更好的错误处理：Promise 提供了 ​​.catch()​​ 方法来集中处理错误，这使得错误处理更加清晰和一致。
  • 易于测试：Promise 使得异步代码更容易被测试，因为它们可以像同步代码一样被断言。

Promise 是现代 JavaScript 异步编程的基础，它为开发者提供了一种更强大、更灵活的方式来处理异步操作。

如有表述错误及不足之处还望各位佬指正补充。

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

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

相关文章

【CSS】“flex: 1“有什么用？

【CSS】“flex: 1“有什么用？

flex 属性的组成 flex 属性是一个复合属性&#xff0c;包含以下三个子属性&#xff1a; flex-grow&#xff1a;决定元素在容器中剩余空间的分配比例。默认值为 0&#xff0c;表示元素不会扩展。当设置为正数时&#xff0c;元素会按照设定比例扩展。flex-shrink&#xff1a;决…
阅读更多...
计算机课程管理：Spring Boot与工程认证的协同创新

计算机课程管理：Spring Boot与工程认证的协同创新

3系统分析 3.1可行性分析 通过对本基于工程教育认证的计算机课程管理平台实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于工程教育认证的计算机课程管理平…
阅读更多...
【SpringBoot】18 上传文件到数据库（Thymeleaf + MySQL）

【SpringBoot】18 上传文件到数据库（Thymeleaf + MySQL）

Git仓库 https://gitee.com/Lin_DH/system 介绍 使用 Thymeleaf 写的页面&#xff0c;将&#xff08;txt、jpg、png&#xff09;格式文件上传到 MySQL 数据库中。 依赖 pom.xml <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j --><depende…
阅读更多...
Sharding运行模式、元数据、持久化详解

Sharding运行模式、元数据、持久化详解

运行模式 单机模式 能够将数据源和规则等元数据信息持久化&#xff0c;但无法将元数据同步至多个Sharding实例&#xff0c;无法在集群环境中相互感知。 通过某一实例更新元数据之后&#xff0c;会导致其他实例由于获取不到最新的元数据而产生不一致的错误。 适用于工程师在本…
阅读更多...
挖掘web程序中的OAuth漏洞：利用redirect_uri和state参数接管账户

挖掘web程序中的OAuth漏洞：利用redirect_uri和state参数接管账户

本文探讨了攻击者如何利用OAuth漏洞&#xff0c;重点是滥用redirect_uri和state参数以接管用户账户。如果redirect_uri参数验证不严&#xff0c;可能会导致未经授权的重定向到恶意服务器&#xff0c;从而使攻击者能够捕获敏感信息。同样&#xff0c;state参数的错误实现可能使O…
阅读更多...
Python世界：力扣题解1712，将数组分成三个子数组的方案数，中等

Python世界：力扣题解1712，将数组分成三个子数组的方案数，中等

Python世界&#xff1a;力扣题解1712&#xff1a;将数组分成三个子数组的方案数&#xff0c;中等 任务背景思路分析代码实现测试套件本文小结 任务背景 问题来自力扣题目1712. Ways to Split Array Into Three Subarrays&#xff0c;大意如下&#xff1a; A split of an intege…
阅读更多...
Java集合基础——针对实习面试

Java集合基础——针对实习面试

目录 Java集合基础什么是Java集合&#xff1f;说说List,Set,Queue,Map的区别&#xff1f;说说List?说说Set?说说Map&#xff1f;说说Queue?为什么要用集合&#xff1f;如何选用集合&#xff1f; Java集合基础 什么是Java集合&#xff1f; Java集合&#xff08;Java Collect…
阅读更多...
基于单片机的客车载客状况自动检测系统（论文+源码）

基于单片机的客车载客状况自动检测系统（论文+源码）

1系统整体设计 本课题为客车载客状况自动检测系统&#xff0c;在此以STM32单片机为核心控制器&#xff0c;结合压力传感器、红外传感器、蜂鸣器、语音提示模块、继电器、液晶等构成整个客车载客状况自动检测系统&#xff0c;整个系统架构如图2.1所示&#xff0c;在此通过两个红…
阅读更多...
渗透测试（socket,namp,scapy）

渗透测试（socket,namp,scapy）

socket:可以用来实现不同虚拟机或者不同计算机之间的通信。 socket常用函数&#xff1a; sock.bind(host,port) //host可接受client范围&#xff0c;以及连接的端口 sock.listen()//sever开启监听连接 sock.accpet()//返回 sock&#xff0c;addr 用来接受和发送数据 addr…
阅读更多...
【mongodb】数据库的安装及连接初始化简明手册

【mongodb】数据库的安装及连接初始化简明手册

NoSQL(NoSQL Not Only SQL )&#xff0c;意即"不仅仅是SQL"。 在现代的计算系统上每天网络上都会产生庞大的数据量。这些数据有很大一部分是由关系数据库管理系统&#xff08;RDBMS&#xff09;来处理。 通过应用实践证明&#xff0c;关系模型是非常适合于客户服务器…
阅读更多...
内网对抗-信息收集篇SPN扫描DC定位角色区域定性服务探针安全防护凭据获取

内网对抗-信息收集篇SPN扫描DC定位角色区域定性服务探针安全防护凭据获取

知识点&#xff1a; 1、信息收集篇-网络架构-出网&角色&服务&成员 2、信息收集篇-安全防护-杀毒&防火墙&流量监控 3、信息收集篇-密码凭据-系统&工具&网站&网络域渗透的信息收集&#xff1a; 在攻防演练中&#xff0c;当完成边界突破后进入内…
阅读更多...
OpenWebUI，RAG+外部知识库+AI写文的开源应用

OpenWebUI，RAG+外部知识库+AI写文的开源应用

引言 自从去年AI火起来之后&#xff0c;很多人便热衷于寻找适合自用的AI开源项目&#xff0c;把各家大模型API接入到自己的AI程序里&#xff0c;便可以通过AI辅助完成一系列日常任务&#xff0c;比如内容翻译/润色/总结/撰写、格式转换、数据分类、代码分析、角色扮演等等。 …
阅读更多...
qt QErrorMessage详解

qt QErrorMessage详解

1、概述 QErrorMessage是Qt框架中用于显示错误消息的一个对话框类。它提供了一个简单的模态对话框&#xff0c;用于向用户显示错误或警告消息。QErrorMessage通常用于应用程序中&#xff0c;当需要向用户报告错误但不希望中断当前操作时。它提供了一个标准的错误消息界面&…
阅读更多...
一文了解Android的Doze模式

一文了解Android的Doze模式

Android 的 Doze 模式是一项省电功能&#xff0c;主要用于减少设备的功耗&#xff0c;特别是在屏幕关闭且设备长时间未被使用的情况下。Doze 模式在 Android 6.0&#xff08;API Level 23&#xff09;首次引入&#xff0c;并在后续版本中不断改进&#xff0c;以便更智能地管理后…
阅读更多...
美团代付微信小程序系统 read.php 任意文件读取漏洞复现

美团代付微信小程序系统 read.php 任意文件读取漏洞复现

0x01 产品简介 美团代付微信小程序系统是美团点评旗下的一款基于微信小程序技术开发的应用程序功能之一，它允许用户方便快捷地请求他人为自己支付订单费用。随着移动支付的普及和微信小程序的广泛应用，美团作为中国领先的本地生活服务平台，推出了代付功能，以满足用户多样化…
阅读更多...
SpringBoot-员工管理系统（1）

SpringBoot-员工管理系统（1）

目录 一、首页配置 二、国际化 2.1 配置文件编写 2.2 使配置文件生效 2.3 配置页面国际化值 2.4 实现根据按钮自动切换中英文 三、登录拦截器 一、首页配置 1、所有页面的静态资源都需要用thymeleaf接管 2、url使用{}格式 二、国际化 2.1 配置文件编写 1、在resourc…
阅读更多...
JavaSE：初识Java（学习笔记）

JavaSE：初识Java（学习笔记）

java是高级语言的面向对象语言 .[最贴近生活.最快速分析和设计程序] 一&#xff0c;计算机语言发展历史 二&#xff0c;Java体系结构 1&#xff0c;JavaSE&#xff08;Java Standard Edition&#xff09; 标准版&#xff0c;定位在个人计算机上的应用 这个版本是Jav…
阅读更多...
Android——多线程、线程通信、handler机制

Android——多线程、线程通信、handler机制

Android——多线程、线程通信、handler机制 模拟网络请求&#xff0c;会阻塞主线程 private String getStringForNet() {StringBuilder stringBuilder new StringBuilder();for (int i 0; i < 100; i) {stringBuilder.append("字符串" i);}try {Thread.sleep(…
阅读更多...
Jumpserver

Jumpserver

概述 一款开源的堡垒机&#xff0c;可使系统的管理员和开发人员安全的连接到企业内部服务器上执行操作&#xff0c;是一款非常安全的远程连接工具。 4A 身份验证授权控制账号管理安全审计 安装 [rootjumpserver project]# tar -xf jumpserver-offline-installer-v2.28.6-amd64…
阅读更多...
【专题】2024年全球生物医药交易报告汇总PDF洞察（附原数据表）

【专题】2024年全球生物医药交易报告汇总PDF洞察（附原数据表）

原文链接&#xff1a;https://tecdat.cn/?p38191 在当今复杂多变的全球经济环境下&#xff0c;医药行业正面临着诸多挑战与机遇。2024 年&#xff0c;医药行业的发展态势备受关注。 一方面&#xff0c;全球生物医药交易活跃&#xff0c;2021 - 2023 年的交易中&#xff0c;已…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023