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

news2024/11/13 22:06:49

异步编程是一种让程序能够在等待某些操作完成的同时继续执行其他任务的关键技术,打破了传统编程中顺序执行代码的束缚。这种编程范式允许开发者构建出能够即时响应用户操作、高效处理网络请求和资源加载的应用程序。通过异步编程,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 = '这里是异步获取的数据';
            // 假设操作成功,调用 resolve
            resolve(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.coloradmin.cn/o/2238160.html

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

相关文章

11.9.2024刷华为

文章目录 HJ31 单词倒排HJ32 密码提取语法知识记录 傻逼OD题目又不全又要收费&#xff0c;看毛线&#xff0c;莫名奇妙 HW这叼机构别搁这儿害人得不得&#xff1f; 我觉得我刷完原来的题目 过一遍华为机考的ED卷出处&#xff0c;就行了 HJ31 单词倒排 游戏本做过了好像 HJ3…

【Qt聊天室客户端】登录窗口

1. 验证码 具体实现 登录界面中创建验证码图片空间&#xff0c;并添加到布局管理器中 主要功能概述&#xff08;创建一个verifycodewidget类专门实现验证码操作&#xff09; 详细代码 // 头文件#ifndef VERIFYCODEWIDGET_H #define VERIFYCODEWIDGET_H#include <QWidget>…

如何判断 Hive 表是内部表还是外部表

在使用 Apache Hive 进行大数据处理时&#xff0c;理解表的类型&#xff08;内部表或外部表&#xff09;对于数据管理和维护至关重要。本篇文章将详细介绍如何判断 Hive 表是内部表还是外部表&#xff0c;并提供具体的操作示例。 目录 Hive 表的类型简介判断表类型的方法 方法…

初始JavaEE篇 —— 文件操作与IO

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 文件介绍 Java标准库中提供操作文件的类 文件系统操作 File类的介绍 File类的使用 文件内容操作 二进制文件的读写操作…

推荐一个Star超过2K的.Net轻量级的CMS开源项目

推荐一个具有模块化和可扩展的架构的CMS开源项目。 01 项目简介 Piranha CMS是一个轻量级且跨平台的CMS库&#xff0c;专为.NET 8设计。 该项目提供多种模板&#xff0c;具备CMS基本功能&#xff0c;也有空模板方便从头开始构建新网站&#xff0c;甚至可以作为移动应用的后端…

【react-router-dom】你可能要知道的关于v6.x自定义权限路由的实现

路由权限&#xff0c;是webapp或者说后台管理都会需要的业务功能。现在对react-routerv6.x的路由库&#xff0c;封装一个简易的权限路由&#xff0c;实现思路: 后台登录效果 代码实现 思路就是对路由表迭代出来的路由&#xff0c;用一个HOC来进行拦截&#xff0c;在真实进入路…

贪心算法day05(k次取反后最大数组和 田径赛马)

目录 1.k次取反后最大化的数组和 2.按身高排序 3.优势洗牌 1.k次取反后最大化的数组和 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 代码&#xff1a; class Solution {public int largestSumAfterKNegations(int[] nums, int k) {//如…

AI(11)-海报制作

1-画板 2-【矩形工具】 130x20&#xff1a;2个 100x10&#xff1a;1个 200x30&#xff1a;1个 3-参数调整 3-1-【颜色&#xff1a;65&#xff0c;10&#xff0c;40&#xff0c;0】&#xff0c;【无描边】 4-【shift】【倾斜工具】-调整矩形形状 4-1-单独调整一个矩形 4-2…

cherno引擎课 -

感谢b站星云图形的翻译&#xff1a;【双语】【最佳游戏引擎教程实战】【入门】&#xff08;1&#xff09;&#xff1a;Introducing the GAME ENGINE series!_哔哩哔哩_bilibili Introducing the GAMEENGINE series 希望&#xff1a;它是一个制作(互动)3D实时渲染应用程序的引…

Linux git-bash配置

参考资料 命令提示符Windows下的Git Bash配置&#xff0c;提升你的终端操作体验WindowsTerminal添加git-bash 目录 一. git-bash配置1.1 解决中文乱码1.2 修改命令提示符 二. WindowsTerminal配置git-bash2.1 添加git-bash到WindowsTerminal2.2 解决删除时窗口闪烁问题 三. VS…

秃姐学AI系列之:GRU——门控循环单元 | LSTM——长短期记忆网络

RNN存在的问题 因为RNN模型的BPTT反向传导的链式求导&#xff0c;导致需要反复乘以一个也就是说会出现指数级别的问题&#xff1a; 梯度爆炸&#xff1a;如果的话&#xff0c;那么连乘的结果可能会快速增长&#xff0c;导致梯度爆炸梯度消失&#xff1a;如果的话&#xff0c;…

Java面试要点06 - static关键字、静态属性与静态方法

本文目录 一、引言二、静态属性&#xff08;Static Fields&#xff09;三、静态方法&#xff08;Static Methods&#xff09;四、静态代码块&#xff08;Static Blocks&#xff09;五、静态内部类&#xff08;Static Nested Classes&#xff09;六、静态导入&#xff08;Static…

【测试】【Debug】vscode pytest 找不到测试用例测试文件 行号部位没有绿色箭头

出现这种情况首先检查&#xff1a; 是否安装pytest点击vscode的这个图标如果其中都是空的&#xff0c;没有识别上&#xff0c;并且写好的.py测试文件的行号前面没有运行符号&#xff0c;要检查名称是否按照pytest的要求写&#xff0c;不然会识别不到。 命名规则注意&#xff1…

区块链技术在电子政务中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 引言 区块链技术概述 定义与原理 发…

【Java Web】Servlet

文章目录 Servlet APIServlet生命周期Servlet配置注解配置文件全局参数 Servlet获得内置对象升级示例3 Servlet 是一种用于构建 Java 服务器端应用程序的技术&#xff0c;允许开发者创建动态的 web 内容。Servlets 在 Java 平台上运行&#xff0c;并由 Java Servlet API 提供支…

linux命令详解,存储管理相关

存储管理 一、内存使用量&#xff0c;free free 命令是一个用于显示系统中物理内存&#xff08;RAM&#xff09;和交换空间&#xff08;swap&#xff09;使用情况的工具 free -m free -m -s 5参数 -b 功能: 以字节&#xff08;bytes&#xff09;为单位显示内存使用情况。说…

流体力学ansys Fluent二次开发scheme_eval模块剖析

在ANSYS Fluent的二次开发中&#xff0c;scheme_eval 是 Scheme 编程语言中一个非常重要的模块&#xff0c;它允许用户执行动态的 Scheme 表达式和函数&#xff0c;从而扩展 Fluent 的功能。scheme_eval 模块通常与 Fluent 的计算和自定义脚本操作紧密结合。下面我们会对这个模…

中仕公考:大四在校生考公怎么规划?

还在就读的大学生&#xff0c;大三下学期就可以备考&#xff0c;大四以应届生的身份参加考试&#xff0c;中仕不建议大家把备考战线拉得太长或者太短&#xff0c;时间太长容易疲惫&#xff0c;时间太短容易备考不到位。 考公流程&#xff1a; 查看公告职位表→网上报名一资格…

【363】基于springboot的高校竞赛管理系统

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统高校竞赛管理系统信息管理难度大&#xff0c;容错率低&am…

网站架构知识之Ansible模块(day021)

1.Ansible模块 作用:通过ansible模块实现批量管理 2.command模块与shell模块 command模块是ansible默认的模块&#xff0c;适用于执行简单的命令&#xff0c;不支持特殊符号 案列01&#xff0c;批量获取主机名 ansible all -m command -a hostname all表示对主机清单所有组…