【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，一经查实，立即删除！

相关文章

如何自己实现事件的订阅和发布呢？

如何自己实现事件的订阅和发布呢？

1.原理 核心思想是基于发布/订阅模式&#xff0c;用一个共享的数据结构来管理事件和事件监听器。主要功能包括事件订阅、取消订阅、发布事件等功能。 实现思路 定义事件和监听器接口&#xff1a;首先定义一个 Event 类和一个 EventListener 接口&#xff0c;所有事件和监听器…
阅读更多...
【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技术可行性 本基于工程教育认证的计算机课程管理平…
阅读更多...
vuepress配置谷歌广告-通过vue-google-adsense库

vuepress配置谷歌广告-通过vue-google-adsense库

在 VuePress 中可以使用 vue-google-adsense 插件来配置 Google AdSense 广告&#xff0c;这个库可以简化在 VuePress 项目中插入广告的过程。 以下是使用 vue-google-adsense 配置广告的步骤&#xff1a; 1. 安装 vue-google-adsense 库 在你的 VuePress 项目根目录下安装 …
阅读更多...
深度学习：解码器如何与编码器交互的过程

深度学习：解码器如何与编码器交互的过程

解码器如何与编码器交互的过程 在序列到序列的神经网络模型中&#xff0c;解码器与编码器的交互是实现有效翻译、文本生成等任务的关键环节。这种交互主要是通过编码器-解码器注意力机制&#xff08;通常称为跨注意力机制&#xff09;来实现的&#xff0c;它允许解码器在生成每…
阅读更多...
通过VirtualBox虚拟机安装和调试编译好的 ReactOS

通过VirtualBox虚拟机安装和调试编译好的 ReactOS

1. 首先创建一个虚拟机配置脚本 setup_vm.bat&#xff1a; batch echo off :: setup_vm.bat :: 设置路径 set "REACTOS_BUILDE:\Reactos_WinDriver\reactos-master\build" set "VM_PATHE:\VMs\ReactOS_Debug" set "VBOX_MANAGEC:\Program Files\Ora…
阅读更多...
Kubernetes-Kubectl篇-01-常用命令

Kubernetes-Kubectl篇-01-常用命令

kubectl 常见命令 登录命令 根据机器ip使用kubectl登录机器(field-selector): #!/bin/bash export targetIp"6.0.90.240"#alias kubectlkubectl alias kubectlkubectl --kubeconfig/Users/king/.kube/sa128.configpodinfokubectl get pod --all-namespaces --fiel…
阅读更多...
【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…
阅读更多...
Kubernetes实现故障转移和微服务弹性伸缩

Kubernetes实现故障转移和微服务弹性伸缩

以下是在Kubernetes&#xff08;k8s&#xff09;中实现故障转移和高可用的方法及详细操作步骤&#xff1a; 一、通过Kubernetes Deployment实现故障转移&#xff08;多实例部署&#xff09; 方法概述&#xff1a; 通过创建Deployment资源并设置多个副本&#xff0c;Kubernete…
阅读更多...
Sharding运行模式、元数据、持久化详解

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

运行模式 单机模式 能够将数据源和规则等元数据信息持久化&#xff0c;但无法将元数据同步至多个Sharding实例&#xff0c;无法在集群环境中相互感知。 通过某一实例更新元数据之后&#xff0c;会导致其他实例由于获取不到最新的元数据而产生不一致的错误。 适用于工程师在本…
阅读更多...
Go语言进阶之Context控制并发

Go语言进阶之Context控制并发

Context Context是Go语言中一个用于传递请求范围的上下文信息的标准库包&#xff0c;其主要用于处理并发操作中请求的生命周期的管理。 协程如何退出 利用协程退出的例子来说明Context的作用&#xff0c;以及没有使用Context&#xff0c;应该如何在没有执行完代码时提前退出…
阅读更多...
挖掘web程序中的OAuth漏洞：利用redirect_uri和state参数接管账户

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

本文探讨了攻击者如何利用OAuth漏洞&#xff0c;重点是滥用redirect_uri和state参数以接管用户账户。如果redirect_uri参数验证不严&#xff0c;可能会导致未经授权的重定向到恶意服务器&#xff0c;从而使攻击者能够捕获敏感信息。同样&#xff0c;state参数的错误实现可能使O…
阅读更多...
数据中心类DataCenter（二）

数据中心类DataCenter（二）

数据中心类DataCenter&#xff08;二&#xff09; 前言 在上一集我们对数据中心类DataCenter做了以下内容&#xff0c;我们对他进行设置单例模式&#xff0c;我们讨论并写入了一些我们数据中心类需要管理的数据&#xff0c;重点介绍了我们验证码id的重要性&#xff0c;在最后…
阅读更多...
ORACLE 闪回技术简介

ORACLE 闪回技术简介

闪回技术是若干技术的集合 包含对数据库整体的闪回 对表的闪回 对事务的闪回 经典面试题面试题&#xff1a;简述Oracle数据库闪回技术&#xff1f; 1.闪回Oracle数据库 2.闪回表 3.闪回事务 数据库闪回 要想实现数据库闪回 1.必须配置数据库的恢复区 SQL> show parameter …
阅读更多...
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集合框架之映射（Map）

Java集合框架之映射（Map）

引言 在Java编程中&#xff0c;管理键值对数据是一项常见的任务。Java集合框架中的Map接口为此提供了强大的支持。Map接口允许我们存储键值对&#xff0c;并提供了丰富的方法来操作这些键值对。本文将详细介绍Map接口的内部机制、特性、操作方法以及在实际编程中的应用场景。 …
阅读更多...
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;在此通过两个红…
阅读更多...
卷积核参数详细介绍

卷积核参数详细介绍

卷积核参数详细介绍如下&#xff1a; 2. 尺寸&#xff1a;卷积核通常是一个小矩阵&#xff0c;如3x3、5x5等&#xff0c;定义了卷积的大小范围&#xff0c;在网络中代表感受野的大小。 3. 权重&#xff1a;卷积核中的每个元素都有一个权重值&#xff0c;用于捕捉输入数据的特征…
阅读更多...
第 3 章 -GO语言 基本语法

第 3 章 -GO语言 基本语法

1. 注释 在编程中&#xff0c;注释是帮助理解代码的重要工具。Go语言支持两种类型的注释&#xff1a; 单行注释&#xff1a;以 // 开头&#xff0c;直到行尾都是注释。多行注释&#xff1a;以 /* 开始&#xff0c;以 */ 结束&#xff0c;可以跨越多行。 示例 package maini…
阅读更多...
最新文章

Copyright @ 2022~2023