JS-异步编程-MDN文档学习笔记

异步JS

查看更多学习笔记:GitHub:LoveEmiliaForever
MDN中文官网

异步编程简介

异步编程赋予程序如下特性

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

浏览器中许多高耗时功能都是异步实现的

  • fetch()请求资源
  • getUserMedid()访问用户的多媒体设备
  • showOpenFilePicker()用户选择图片

事件处理程序实际上就是异步编程的一种形式:你提供的函数(事件处理程序)将在事件发生时被调用(而不是立即被调用)

回调函数是一个被传递到另一个函数中的会在适当的时候被调用的函数
回调函数曾经是 JavaScript 中实现异步函数的主要方式
但是,一但回调函数嵌套起来,那就让代码变的难以理解,称为回调地狱厄运金字塔

// 回调地狱示例
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();

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

Promise的使用

在基于 Promise 的 API 中,异步函数会启动操作并返回 Promise 对象
然后,你可以将处理函数附加到 Promise 对象上
当操作完成时(成功或失败),这些处理函数将被执行

fetch()

fetch() API,一个现代的、基于 Promise 的、用于替代 XMLHttpRequest 的方法

// 异步操作,请求资源
const fetchPromise = fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);console.log(fetchPromise);// 绑定处理函数到 成功 状态上
fetchPromise.then((response) => {console.log(`已收到响应:${response.status}`);
});console.log("已发送请求……");// Promise { <state>: "pending" }
// 已发送请求……
// 已收到响应:200

链式调用Promise

可以一步一步的定义异步操作的顺序,且是通过链式调用的方式,而不是嵌套

const fetchPromise = fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);fetchPromise.then((response) => {return response.json();}).then((json) => {console.log(json[0].name);});

错误捕获

Promise 对象提供了一个 catch() 方法来支持错误处理
当异步操作失败时,传递给 catch() 的处理函数被调用
如果将 catch() 添加到 Promise 链的末尾,它就可以在任何异步函数失败时被调用

const fetchPromise = fetch("bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);fetchPromise.then((response) => {if (!response.ok) {throw new Error(`HTTP 请求错误:${response.status}`);}return response.json();}).then((json) => {console.log(json[0].name);}).catch((error) => {console.error(`无法获取产品列表:${error}`);});

Promise状态

  • 待定 pending:初始状态,既没有被兑现,也没有被拒绝,还在运行中
  • 已兑现 fulfilled:意味着操作成功,当 Promise 完成时,它的 then() 处理函数被调用
  • 已拒绝 rejected:意味着操作失败,当 Promise 失败时,它的 catch() 处理函数被调用
  • 已敲定 settled:同时表示fulfilledrejected两种情况是否出现了其一
  • 已决议 resolved:被认为是fulfilled

Promise的逻辑运算(非且或)

某些情况下,需要规定多个Promise之间的运行逻辑

  • Promise.all(),接收一个 Promise 数组,并返回一个单一的 Promise
    • 数组中所有的 Promise 都被兑现时,才通知 then() 处理函数,并提供响应数组,响应数组顺序与 Promise 数组顺序相同
    • Promise数组中任意 Promise 被拒绝,catch() 处理函数被调用,并提供被拒绝的 Promise 所抛出的错误
  • Promise.any()
    • 任意一个Promise兑现,则启动then()
    • 全部Promise拒绝,则启动catch()

async和await

在一个函数的开头添加 async,就可以使其成为一个异步函数
异步函数总是返回一个 Pomise,因此处理异步函数应该使用then()catch()

在调用一个返回 Promise 的函数之前使用 await 关键字
这使得代码在该点上等待,直到 Promise 被完成,这时 Promise 的响应被当作返回值,或者被拒绝的响应被作为错误抛出

workers多线程

Workers给了你在不同线程中运行某些任务的能力,因此你可以多线程操作
对于多线程代码,你永远不知道你的线程什么时候将会被挂起,以让步于其它线程
你的主代码和你的 worker 代码永远不能直接访问彼此的变量,只有通过相互发送消息来进行交互
这意味着 workers 不能访问 DOM(窗口、文档、页面元素等等)

workers共有三种类型

  • dedicated workers:它由一个脚本实例使用
  • shared workers:由运行在不同窗口中的多个不同脚本共享
  • service workers:像代理服务器,缓存资源以便于 web 应用程序可以在用户离线时工作

运行workers

  1. 主代码和workers代码存放于不同js文件
  2. 主代码
    1. 使用const worker = new Worker("./workers.js")在主代码中创建worker
    2. 使用 worker.postMessage() 向 worker 发送消息
    3. 向 worker 添加一个 message 消息处理器(监听message事件的监听器),以处理worker传过来的消息
  3. worker代码
    1. 添加一个 监听message事件的监听器,以对主代码传过来的消息做出反应
    2. 在 message 事件处理器内部,事件的 data 属性包含一个来自主脚本的参数的副本
    3. postMessage()向主代码传递消息

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

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

相关文章

【算法与数据结构】200、695、LeetCode岛屿数量(深搜+广搜) 岛屿的最大面积

文章目录 一、200、岛屿数量1.1 深度优先搜索DFS1.2 广度优先搜索BFS 二、695、岛屿的最大面积2.1 深度优先搜索DFS2.2 广度优先搜索BFS 三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、200、岛屿数量 1.1 深度优先搜…

2.Swift Tabbar的使用

Swift Tabbar的使用 在 Swift 中使用 UITabBarController 来创建一个具有选项卡界面的应用程序。下面是一个简单的示例&#xff0c;演示如何在 Swift 中使用 UITabBarController&#xff1a; import UIKitclass RootTabbar: UITabBarController {override func viewDidLoad()…

Redis篇----第十一篇

系列文章目录 文章目录 系列文章目录前言一、Redis 如何做内存优化?二、Redis 回收进程如何工作的?三、都有哪些办法可以降低 Redis 的内存使用情况呢?四、Redis 的内存用完了会发生什么?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下…

【前端素材】推荐优质后台管理系统Symox模板(适用电商,附带源码)

一、需求分析 后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;它通常作为一个独立的后台界面存在&#xff0c;供管理员或特定用户使用。下面详细分析后台管理系统的定义和功能&#xff1a; 1. 定义 后台管理系统是一个用于管理和控制网站、应用程序或系统…

LeetCode209长度最小子数组

参考链接&#xff1a;209.长度最小的子数组 注意&#xff1a;本题的子数组是连续的&#xff0c;一串一串的 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {int i,j,minDis99999999;int sum0;//j控制子数组末尾&#xff0c;i控制子数…

gentoo安装笔记

最近比较闲&#xff0c;所以挑战一下自己&#xff0c;在自己的台式电脑上安装gentoo 下面记录了我亲自安装的步骤&#xff0c;作为以后我再次安装时参考所用。 整体步骤 一般来将一个linux发行版的安装步骤其实大体上都差不多&#xff0c;基本分为一下几步&#xff1a; 1. …

【算法与数据结构】1020、LeetCode飞地的数量

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;   程序如下&#xff1a; 复杂度分析&#xff1a; 时间复杂度&#xff1a; O ( ) O() O()。空间复杂…

RisingWave分布式SQL流处理数据库调研

概述 RisingWave是一款分布式SQL流处理数据库&#xff0c;旨在帮助用户降低实时应用的的开发成本。作为专为云上分布式流处理而设计的系统&#xff0c;RisingWave为用户提供了与PostgreSQL类似的使用体验&#xff0c;官方宣称具备比Flink高出10倍的性能&#xff08;指throughp…

快速清理_卸载docker_找到不用的进程_centos磁盘爆满_清理磁盘---Linux工作笔记071

查看大文件,并且按照大小排名 cd / | du -h |sort -hr|head -30 可以看到根据不用的结果进行删除 可以看到在/data/dict目录很大,里面的都可以删除 然后再去卸载docker,要不然,没有磁盘是卸载不了的 systemctl stop docker systemctl stop docker.socket yum remove docker-…

【2024上半年数学建模推荐】2024年第九届数维杯大学生数学建模挑战赛报名通知

2024上半年数模人必打的数学建模竞赛&#xff1a;数维杯全国大学生数学建模挑战赛已经开始报名。 赛题难度&#xff1a;四颗星 含金量&#xff1a;国家级二类 参赛对象&#xff1a;在校专科、本科、研究生 推荐理由&#xff1a;获奖率高&#xff0c;赛题难度比国赛略微简单…

Qt _day1

1.思维导图 2.设计一个简单登录界面 #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {this->setWindowTitle("原神启动"); // this->setStyleSheet("background-color:rgb(255,184,64)");this->setStyl…

XSS攻击原理与解决方法

参考&#xff1a; web安全之XSS攻击原理及防范_xss攻击原理与解决方法-CSDN博客 跨站脚本攻击&#xff08;XSS)分类介绍及解决办法_反射型跨站脚本解决方案-CSDN博客 一、概述 XSS攻击是Web攻击中最常见的攻击方法之一&#xff0c;它是通过对网页注入可执行代码且成功地被浏…

ThinkPHP6中使用GatewayWorker

首先是先安装 composer require workerman/gateway-worker composer require workerman/gatewayclient下载demo 服务器开通TCP端口8282、1238 将Applications\YourApp目录随便放ThinkPHP6的哪个位置&#xff0c;我这里放在了app\gateway\ws目录中 配置composer.json "…

【竞技宝】DOTA2-喀山:莫言帕克毁天灭地 IG让一追二力克Neon

北京时间2024年2月21日,喀山未来运动会DOTA2项目在昨天迎来第二个比赛日。本日第二轮第二场比赛由IG对阵Neon。本场比赛两队在前两局各取一胜,决胜局IG的防守反击多次击溃Neon,最终IG让一追二击败Neon。以下是本场比赛的详细战报。 第一局: 首局比赛,IG在天辉方,Neon在夜魇方。…

c++try-catch块的使用和异常处理机制。异常的传播和捕获规则。

ctry-catch块的使用和异常处理机制。 在C中&#xff0c;try-catch块是一种异常处理机制&#xff0c;用于在程序执行期间捕获和处理可能发生的异常。try块用于包含可能抛出异常的代码&#xff0c;而catch块则用于捕获并处理这些异常。 以下是try-catch块的基本用法和异常处理机…

Python自动化部署与配置管理:Ansible与Docker

Ansible 和 Docker 是两种常用于自动化部署和配置管理的工具。Ansible 是一个基于 Python 的自动化运维工具&#xff0c;可以配置管理、应用部署、任务自动化等。而 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中&…

算法项目(2)—— LSTM、RNN、GRU(SE注意力)、卡尔曼轨迹预测

本文包含什么? 项目运行的方式(包教会)项目代码LSTM、RNN、GRU(SE注意力)、卡尔曼四种算法进行轨迹预测.各种效果图运行有问题? csdn上后台随时售后.项目说明 本文实现了三种深度学习算法加传统算法卡尔曼滤波进行轨迹预测, 预测效果图 首先看下不同模型的指标: 模型RM…

unity学习(33)——角色选取界面(原版)

10ARPG网络游戏编程实践&#xff08;十&#xff09;&#xff1a;角色选择UI及创建面板制作&#xff08;一&#xff09;&#xff08;流畅&#xff09;_哔哩哔哩_bilibili 角色选择界面教程中是这样的&#xff01;&#xff08;这个美工肯定是不能拿出去卖的&#xff0c;但是是有…

IP协议及相关技术协议

一、IP基本认识 1. IP的作用 IP在TCP/IP模型中处于网络层&#xff0c;网络层的主要作用是实现主机与主机之间的通信&#xff0c;而IP的作用是在复杂的网络环境中将数据包发送给最终目的主机。 2. IP与MAC的关系 简单而言&#xff0c;MAC的作用是实现“直连”的两个设备之通信…

77、Spring、Spring Boot和Spring Cloud的关系

77、Spring、Spring Boot和Spring Cloud的关系 随着 Spring、Spring Boot 和 Spring Cloud 的不断发展&#xff0c;越来越多的开发者加入 Spring 的大军中。对于初学者而言&#xff0c;可能不太了解 Spring、Spring Boot 和 Spring Cloud 这些概念以及它们之间的关系&#xff…