异步javaScript

在本文中,我们将解释什么是异步编程,为什么我们需要它,并简要讨论 JavaScript 历史上异步函数是怎样被实现的。

预备知识:基本的计算机素养,以及对 JavaScript 基础知识的一定了解,包括函数和事件处理程序。
目标:熟悉异步 JavaScript 的概念,了解它与同步 JavaScript 的不同,以及我们需要它的原因。

异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时,你的程序也将在任务完成后显示结果。

浏览器提供的许多功能(尤其是最有趣的那一部分)可能需要很长的时间来完成,因此需要异步完成,例如:

  • 使用 fetch() 发起 HTTP 请求
  • 使用 getUserMedia() 访问用户的摄像头和麦克风
  • 使用 showOpenFilePicker() 请求用户选择文件以供访问

因此,即使你可能不需要经常实现自己的异步函数,你也很可能需要正确使用它们。

在这篇文章中,我们将从同步函数长时间运行时存在的问题开始,并以此进一步认识异步编程的必要性。

同步编程

观察下面的代码:

const name = "Miriam";
const greeting = `Hello, my name is ${name}!`;
console.log(greeting);
// "Hello, my name is Miriam!"

这段代码:

  1. 声明了一个叫做 name 的字符串常量
  2. 声明了另一个叫做 greeting 的字符串常量(并使用了 name 常量的值)
  3. 将 greeting 常量输出到 JavaScript 控制台中。

我们应该注意的是,实际上浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作,在上一行完成后才会执行下一行。这样做是很有必要的,因为每一行新的代码都是建立在前面代码的基础之上的。

这也使得它成为一个同步程序

事实上,调用函数的时候也是同步的,就像这样:

function makeGreeting(name) {return `Hello, my name is ${name}!`;
}
const name = "Miriam";
const greeting = makeGreeting(name);
console.log(greeting);
// "Hello, my name is Miriam!"

在这里 makeGreeting() 就是一个同步函数,因为在函数返回之前,调用者必须等待函数完成其工作。

一个耗时的同步函数

如果同步函数需要很长的时间怎么办?

当用户点击“生成素数”按钮时,这个程序将使用一种非常低效的算法生成一些大素数。你可以控制要生成的素数数量,这也会影响操作需要的时间。

<label for="quota">素数个数:</label>
<input type="text" id="quota" name="quota" value="1000000" /><button id="generate">生成素数</button>
<button id="reload">重载</button><div id="output"></div>
function generatePrimes(quota) {function isPrime(n) {for (let c = 2; c <= Math.sqrt(n); ++c) {if (n % c === 0) {return false;}}return true;}const primes = [];const maximum = 1000000;while (primes.length < quota) {const candidate = Math.floor(Math.random() * (maximum + 1));if (isPrime(candidate)) {primes.push(candidate);}}return primes;
}
document.querySelector("#generate").addEventListener("click", () => {const quota = document.querySelector("#quota").value;const primes = generatePrimes(quota);document.querySelector("#output",).textContent = `完成!已生成素数${quota}个。`;
});
document.querySelector("#reload").addEventListener("click", () => {document.location.reload();
});

试着点击“生成素数”按钮。在程序显示“完成!”信息之前可能需要几秒钟(取决于你的电脑性能)。

耗时同步函数的问题

接下来的示例和上一个一样,不过我们增加了一个文本框供你输入。这一次,试着点击“生成素数”,然后在文本框中输入。

你会发现,当我们的 generatePrimes() 函数运行时,我们的程序完全没有反应:用户不能输入任何东西,也不能点击任何东西,或做任何其他事情。

这就是耗时的同步函数的基本问题。在这里我们想要的是一种方法,以让我们的程序可以:

  • 通过调用一个函数来启动一个长期运行的操作
  • 让函数开始操作并立即返回,这样我们的程序就可以保持对其他事件做出反应的能力
  • 当操作最终完成时,通知我们操作的结果。

这就是异步函数为我们提供的能力,本模块的其余部分将解释它们是如何在 JavaScript 中实现的。

事件处理程序

我们刚才看到的对异步函数的描述可能会让你想起事件处理程序,这么想是对的。事件处理程序实际上就是异步编程的一种形式:你提供的函数(事件处理程序)将在事件发生时被调用(而不是立即被调用)。如果“事件”是“异步操作已经完成”,那么你就可以看到事件如何被用来通知调用者异步函数调用的结果的。

一些早期的异步 API 正是以这种方式来使用事件的。XMLHttpRequest API 可以让你用 JavaScript 向远程服务器发起 HTTP 请求。由于这样的操作可能需要很长的时间,所以它被设计成异步 API,你可以通过给 XMLHttpRequest 对象附加事件监听器来让程序在请求进展和最终完成时获得通知。

下面的例子展示了这样的操作。点击“点击发起请求”按钮来发送一个请求。我们将创建一个新的 XMLHttpRequest 并监听它的 loadend 事件。而我们的事件处理程序则会在控制台中输出一个“完成!”的消息和请求的状态代码。

我们在添加了事件监听器后发送请求。注意,在这之后,我们仍然可以在控制台中输出“请求已发起”,也就是说,我们的程序可以在请求进行的同时继续运行,而我们的事件处理程序将在请求完成时被调用。

<button id="xhr">点击发起请求</button>
<button id="reload">重载</button><pre readonly class="event-log"></pre>
const log = document.querySelector(".event-log");
document.querySelector("#xhr").addEventListener("click", () => {log.textContent = "";const xhr = new XMLHttpRequest();xhr.addEventListener("loadend", () => {log.textContent = `${log.textContent}完成!状态码:${xhr.status}`;});xhr.open("GET","https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",);xhr.send();log.textContent = `${log.textContent}请求已发起\n`;
});
document.querySelector("#reload").addEventListener("click", () => {log.textContent = "";document.location.reload();
});

这就像我们在以前的模块中遇到的事件处理程序,只是这次的事件不是像点击按钮那样的用户行为,而是某个对象的状态变化。

回调

事件处理程序是一种特殊类型的回调函数。而回调函数则是一个被传递到另一个函数中的会在适当的时候被调用的函数。正如我们刚刚所看到的:回调函数曾经是 JavaScript 中实现异步函数的主要方式。

然而,当回调函数本身需要调用其他同样接受回调函数的函数时,基于回调的代码会变得难以理解。当你需要执行一些分解成一系列异步函数的操作时,这将变得十分常见。例如下面这种情况:

function doStep1(init) {return init + 1;
}
function doStep2(init) {return init + 2;
}
function doStep3(init) {return init + 3;
}
function doOperation() {let result = 0;result = doStep1(result);result = doStep2(result);result = doStep3(result);console.log(`结果:${result}`);
}
doOperation();

现在我们有一个被分成三步的操作,每一步都依赖于上一步。在这个例子中,第一步给输入的数据加 1,第二步加 2,第三步加 3。从输入 0 开始,最终结果是 6(0+1+2+3)。作为同步代码,这很容易理解。但是如果我们用回调来实现这些步骤呢?

function doStep1(init, callback) {const result = init + 1;callback(result);
}
function doStep2(init, callback) {const result = init + 2;callback(result);
}
function doStep3(init, callback) {const result = init + 3;callback(result);
}
function doOperation() {doStep1(0, (result1) => {doStep2(result1, (result2) => {doStep3(result2, (result3) => {console.log(`结果:${result3}`);});});});
}
doOperation();

因为必须在回调函数中调用回调函数,我们就得到了这个深度嵌套的 doOperation() 函数,这就更难阅读和调试了。在一些地方这被称为“回调地狱”或“厄运金字塔”(因为缩进看起来像一个金字塔的侧面)。

面对这样的嵌套回调,处理错误也会变得非常困难:你必须在“金字塔”的每一级处理错误,而不是在最高一级一次完成错误处理。

由于以上这些原因,大多数现代异步 API 都不使用回调。事实上,JavaScript 中异步编程的基础是 Promise,这也是我们下一篇文章要讲述的主题。

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

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

相关文章

20天学会rust(三)没有object的rust怎么面向对象?

面向对象我们都很熟悉&#xff0c;可以说它是一种软件开发最重要的编程范式之一&#xff0c;它将程序中的数据和操作数据的方法组织成对象。面向对象有几个重要特性&#xff1a; 封装、继承和多态&#xff0c;基于这些特性带来了在可重用性、可维护性、扩展性、可靠性的优点。 …

浅析pom文件标签功能

问题&#xff1a; 对maven项目的pom文件结构和标签不是很清晰 学习笔记&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project><parent><!-- 父项目信息 --></parent><!-- 声明项目描述符遵循哪一个POM模型版…

自然语言处理从入门到应用——LangChain:记忆(Memory)-[基础知识]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 默认情况下&#xff0c;链&#xff08;Chains&#xff09;和代理&#xff08;Agents&#xff09;是无状态的&#xff0c;这意味着它们将每个传入的查询视为独立的&#xff08;底层的LLM和聊天模型也是如此&#xff09;…

用Rust实现23种设计模式之原型模式

在 Rust 中&#xff0c;原型模式可以通过实现 Clone trait 来实现。原型模式是一种创建型设计模式&#xff0c;它允许通过复制现有对象来创建新对象&#xff0c;而无需显式地使用构造函数。下面是一个使用 Rust 实现原型模式的示例&#xff0c;带有详细的代码注释和说明&#x…

shell 入门练习小记

一、hello world #!/bin/bash echo "Hello World !"#! 为约定的标记&#xff0c;告诉系统这个脚本需要什么解释器执行&#xff0c;后接绝对路径 /bin/bash 表示期望 bash去解析并运行shell echo用于向窗口输出文本 chmod x ./test.sh #给脚本赋执行权限 ./test.sh …

Centos7克隆快速复制多台虚拟机|互通互联

背景&#xff1a;有时候&#xff0c;我们在用虚拟机的时候会用到多个进行使用。重新安装会花费大量的时间&#xff0c;此时&#xff0c;我们可以通过vmware虚拟机自带的功能快速克隆出完全相同的系统。 前提&#xff1a;被克隆的虚拟机系统要处于关闭状态 步骤&#xff1a;…

Android入门教程||Android 架构||Android 应用程序组件

Android 架构 Android 操作系统是一个软件组件的栈&#xff0c;在架构图中它大致可以分为五个部分和四个主要层。 Linux内核 在所有层的最底下是 Linux - 包括大约115个补丁的 Linux 3.6。它提供了基本的系统功能&#xff0c;比如进程管理&#xff0c;内存管理&#xff0c;设…

ChatGPT FAQ指南

问:chatgpt 国内不开放注册吗? OpenAI不允许大陆和香港用户注册访问 openai可以的,chatGPT不行 以下国家IP不支持使用 中国(包含港澳台) 俄罗斯 乌克兰 阿富汗 白俄罗斯 委内瑞拉 伊朗 埃及 问:ChatGPT和GPT-3什么关系? GPT-3是OpenAI推出的AI大语言模型 ChatGPT是在G…

spring eurake中使用IP注册

在开发spring cloud的时候遇到一个很奇葩的问题&#xff0c;就是服务向spring eureka中注册实例的时候使用的是机器名&#xff0c;然后出现localhost、xxx.xx等这样的内容&#xff0c;如下图&#xff1a; eureka.instance.perferIpAddresstrue 我不知道这朋友用的什么spring c…

H263压缩码流如何分解为一个一个单元并查询到其宽高?

H263码流尺寸规格有限&#xff0c;只有以下几种&#xff1a; H263码流有四个分层&#xff1a; 1、图像层 2、块组 3、宏块 4、块 下面分别介绍&#xff1a; 具体介绍如下&#xff0c;5.1.3中红色框选部分就是压缩码流的宽高指示&#xff1a; 图像层 上面就是H263的图像层&am…

【回眸】备考PMP考点汇总 四(距离考试还有12天)

目录 前言 【回眸】备考PMP考点汇总 四&#xff08;距离考试还有12天&#xff09; 3、敏捷阶段框架 4、Scrum敏捷实践 5、敏捷交付框架 6、推测阶段 7、用户故事卡片 8、用户故事优先级 9、风险调整代办事项列表 10、用户故事估算 11&#xff1a;Scrum敏捷实践 12、…

使用docker部署一个jar项目

简介: 通过docker镜像, docker可以在服务器上运行包含项目所需运行环境的docker容器, 在线仓库里有很多各个软件公司官方发布的镜像, 或者第三方的镜像. 如果我们需要使用docker把我们的应用程序打包成镜像, 别的机器上只要安装了docker, 就可以直接运行镜像, 而不需要再安装应…

拆分PDBQT文件并将其转换为PDB格式

拆分PDBQT文件转为PDB格式 1. vina_split拆分PDBQT文件 假设你用AutoDock Vina做了对接&#xff0c;那么所有预测的结合构象都被放入一个多构象 PDBQT 文件中&#xff0c;如果需要拆分后进行可视化分析&#xff0c;那么Vina官方自带了vina_split来进行拆分。下面是vina_split…

⛳ Java 枚举

目录 ⛳ 枚举**&#x1f3a8; 例子&#xff1a;使用常量表示线程状态**&#x1f3ed; 例子&#xff1a;使用枚举表示线程状态&#x1f4e2; 例子&#xff1a;订单状态的枚举 ⛳ 枚举 类的对象只有有限个&#xff0c;确定的。 使用场景&#xff1a; 星期&#xff1a; Monday(星…

CentOS 安装 Jenkins

本文目录 1. 安装 JDK2. 获取 Jenkins 安装包3. 将安装包上传到服务器4. 修改 Jenkins 配置5. 启动 Jenkins6. 打开浏览器访问7. 获取并输入 admin 账户密码8. 跳过插件安装9. 添加管理员账户 1. 安装 JDK Jenkins 需要依赖 JDK&#xff0c;所以先安装 JDK1.8。输入以下命令&a…

鸿蒙终于不套壳了?纯血 HarmonyOS NEXT 即将到来

对于移动开发者来说&#xff0c;特别是 Android 开发而言&#xff0c;鸿蒙是不是套壳 Android 一直是一个「热门」话题&#xff0c;类似的问题一直是知乎的「热点流量」之一&#xff0c;特别是每次鸿蒙发布新版本之后&#xff0c;都会有「套娃式」的问题出现。 例如最近 HDC 刚…

Tomcat 编程式启动 JMX 监控

通过这篇文章&#xff0c;我们可以了解到&#xff0c;利用 JMX 技术可以方便获取 Tomcat 监控情况。但是我们采用自研的框架而非大家常见的 SpringBoot&#xff0c;于是就不能方便地通过设置配置开启 Tomcat 的 JMX&#xff0c;——尽管我们也是基于 Tomcat 的 Web 容器&#x…

解决npm ERR! code ERESOLVE -npm ERR! ERESOLVE could not resolve

当使用一份vue源码开发项目时&#xff0c;npm install 报错了 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: vue-admin-template4.4.0npm ERR! Found: webpack4.46.0npm ERR! node_modules/webpacknpm ERR! webpack"^4.0…

uni-app 支持 app端, h5端,微信小程序端 图片转换文件格式 和 base64

uni-app 支持 app端 h5端&#xff0c;微信小程序端 图片转换文件格式 和 base64&#xff0c;下方是插件市场的地址app端 h5端&#xff0c;微信小程序端 图片转换文件格式 和 base64 - DCloud 插件市场

9、Kubernetes核心技术 - Volume

目录 一、概述 二、卷的类型 三、emptyDir 四、hostPath 五、NFS 5.1、master服务器上搭建nfs服务器 5.2、各个slave节点上安装nfs客户端 5.3、创建Pod 六、PV和PVC 6.1、PV 6.1.1、PV资源清单文件示例 6.1.2、PV属性说明 6.1.3、PV的状态 6.2、PVC 6.2.1、PVC资…