Promise学习之同步与异步

目录

前言

一、同步与异步

(一) 同步

(二) 异步

二、总结

(一) 同步

(二) 异步


前言

Java有多线程,前端有同步与异步,异步操作可以优化用户体验提高性能与响应处理并发与并行任务等等,异步操作有发送Ajax请求读文件等,当然异步操作也会带来一些问题回调地狱,那竟然有问题的产生,也就会有解决问题的方法Promise。本系列文章是关于Promise的学习,希望能够帮助大家,如有问题也就大家指出。

感谢李立超老师的讲课,理论清晰透彻,十分推荐!!!观看链接

一、同步与异步

(一) 同步

在计算机程序中,我们所编写的代码一般都是从上到下执行,上一行代码执行完了才会接着到下一行代码的执行,这也就是我们所说的同步

例子

  • 比如去餐厅吃饭,是要点餐等餐吃饭付钱离开,这些步骤都是按照顺序执行的

代码演示

console.log("1.点餐");
const current = Date.now();
console.log("2.等餐");
console.log("等餐2秒钟...");
while (Date.now() - current < 2000) {}
console.log("3.吃饭");
console.log("4.付钱");
console.log("5.离开");

(二) 异步

同步执行中一段代码执行完才会轮到下一段代码,那如果上一段代码一直执行,那下一段代码就需要一直等待,如果映射到项目中就会导致页面白屏系统无法正常操作造成用户体验不佳等问题,这时候就需要异步

例子:

  • 发送ajax请求,在请求过程中,我们可以先避开请求所需时间,继续往下,等请求响应了在进行请求的操作(拿数据、根据响应操作等等)
  • 在等餐过程中,我们做了其他事情,比如玩手机唱跳rap,去做这些事情不会去影响接下来的流程,还可以帮助我们做更多的事情

代码演示一

console.log("页面挂载");
const current = Date.now();
setTimeout(() => {console.log("发送ajax请求");console.log("等待ajax请求响应...");console.log("ajax响应完成,根据响应获取数据");}, 2000);
console.log("页面挂载完成");
console.log("用户浏览网站");

代码演示二

编写两个数的求和异步函数,然后基于请求函数的结果进行下一个请求,以此类推,而异步代码无法通过return设置返回值,需要通过回调函数去获取结果

function sum(a, b, cb) {setTimeout(() => {cb(a + b);}, 2000);
}
const result = sum(10, 20, (result) => {console.log("执行结果1", result);sum(result, 30, () => {console.log("执行结果2", result);sum(result, 40, () => {console.log("执行结果3", result);sum(result, 50, () => {console.log("执行结果4", result);sum(result, 60, () => {console.log("执行结果5", result);console.log("执行结束");});});});});
});

异步代码通过回调函数去获取结果,如果想基于结果再进行下一步计算,就需要在回调函数里面继续调用异步求和函数,这也导致了我们的代码一层嵌套一套,代码极其不美观、可读性差,这也就是我们所说的回调地狱

二、总结

(一) 同步

概念

代码按照从上到下的顺序执行,只有上一段代码执行完才会继续执行下一段代码

特点

代码从上往下执行,顺序分明

问题

  • 前面的代码不执行,后面的代码也不会执行
  • 同步代码执行会出现阻塞的情况
  • 一段代码的执行慢回影响到整个程序

(二) 异步

概念

异步执行代码,后面的代码无需等待异步代码执行完才能执行

特点

  • 不会阻塞其他代码的执行
  • 需要通过回调函数来返回结果

问题

  • 代码可读性差
  • 可调试性差

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

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

相关文章

2024河南萌新联赛第五场 C小美想收集(并查集拓展域,2-sat)

题目链接 思路&#xff1a; 这题是并查集拓展域板题&#xff0c;而且并查集拓展域其实就是2-sat&#xff0c;虽然做法不同&#xff0c;但是思想是相通的&#xff0c;也可以用2-sat来做。 一个回忆可以看成在好回忆或在坏回忆里&#xff0c;两种选择。 code&#xff1a; #in…

MATLAB水果分级系统

课题介绍 现在商业行为中&#xff0c;在水果出厂前都需要进行质量检测&#xff0c;需要将不同等级的水果进行分级包装&#xff0c;以保证商业利益最大化。可是传统方法都是依靠人工进行检测&#xff0c;效率低下&#xff0c;主观成分大&#xff0c;并不能很好客观地评价出货质…

可集成多模型的机器人开发框架 dora:让机器人编程走向大众

作者 | Annie Xu 责编 | 何苗 出品 | GOSIM 开源创新汇 C 和 C是机器人编程中常用的编程语言&#xff0c;但学起来存在一定难度。那些对机器人感兴趣&#xff0c;但没有精力花费数周时间学习 C 和 C编程的用户只能望而却步。 为了让机器人技术变得更简单&#xff0c;陶海轩&a…

SQL手工注入漏洞测试(MongoDB数据库)

此次靶场地址为&#xff1a;墨者学院 ⼀. 如下给出的源码...可以看到数据库查询的语句如下..构造回显测试... new_list.php?id1});return ({title:1,content:2 ⼆.成功显示“ 1” 和“ 2” 。可以在此来显示想要查询的数据。接下来开始尝试构造payload查询 当前数据库。通过…

C# 中 ScrapySharp 的多线程下载策略

引言 在现代互联网应用中&#xff0c;数据抓取是一个常见的需求&#xff0c;无论是为了数据分析、内容聚合还是自动化测试。ScrapySharp 是一个基于 .NET 的轻量级、高性能的网页抓取库&#xff0c;它提供了丰富的功能来简化网页内容的抓取和处理。然而&#xff0c;当面对大量…

2024前端面试题-工程化篇

1.webpack&#xff08;模块打包工具&#xff09;五大核心 Entry入口&#xff0c;Output定义输出路径和命名规则&#xff0c;Loader模块转换器&#xff0c;Plugin扩展插件&#xff0c;Mode模式&#xff08;Webpack使用相应模式的配置&#xff09; 2.谈一谈你对Loader和Plugin的…

CSS 对齐

CSS 对齐 在网页设计中&#xff0c;CSS&#xff08;层叠样式表&#xff09;对齐是一种基本而重要的技术&#xff0c;它决定了网页元素的位置和布局。CSS 提供了多种对齐方法&#xff0c;可以精确控制元素的水平、垂直对齐&#xff0c;以及相对于其父元素或整个页面的位置。本文…

使用python实现3D聚类图

实验记录&#xff0c;在做XX得分预测的实验中&#xff0c;做了一个基于Python的3D聚类图&#xff0c;水平有限&#xff0c;仅供参考。 一、以实现三个类别聚类为例 代码&#xff1a; import pandas as pd import numpy as np from sklearn.decomposition import PCA from sk…

静力水准仪的基本工作原理:解析磁致伸缩式水准仪

静力水准仪作为一种高精度的测量设备&#xff0c;广泛应用于桥梁、隧道、地铁、大坝、大型储罐等工程结构的沉降监测中。其中&#xff0c;磁致伸缩式静力水准仪以其独特的测量原理和技术优势&#xff0c;成为沉降监测领域的重要工具。本文将详细解析磁致伸缩式静力水准仪的基本…

el-scrollbar搭配el-backtop滚动到最顶/最底 el-scrollbar在focus时出现黑框的解决办法

如何搭配 el-scrollbar 和 el-backtop&#xff0c;使其点击后滚动到底部&#xff1a; <template><!-- 一个el-scrollbar区域&#xff0c;其ref是chatArea --><el-scrollbar scroll"(e: any) > { tempHeight e.scrollTop }" ref"chatArea&qu…

67 H3C SecPath F1000 (网络大致介绍)

一 VRF VRF&#xff08;Virtual Routing and Forwarding&#xff0c;虚拟路由和转发&#xff09;用来实现不同VPN的路由隔离。每个VRF都有相对独立的路由表和LFIB&#xff08;Label Forwarding Information Base&#xff0c;标签转发信息库&#xff09;&#xff0c;确保VPN数据…

MySQL基础:事务

&#x1f48e;所属专栏&#xff1a;MySQL &#x1f48e;1. 事务 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;这些操作要么同时成功&#xff0c;要么同时失败 例如转账…

C++第四十弹---从零开始:模拟实现C++中的unordered_set与unordered_map

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1 哈希概念 2 哈希冲突 3 哈希函数 4 哈希冲突解决 4.1 闭散列 4.1.1. 线性探测 4.1.2. 二次探测 4.2 开散列 4.2.1. 开散列概念 4.2.2…

C语言一笔画迷宫

目录 开头程序程序的流程图程序游玩的效果结尾 开头 大家好&#xff0c;我叫这是我58。 程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <string.h> #include <Windows.h> void printmaze(const char strmaze[11][11]) {int ia 0;…

智慧环卫与智慧城市:以人文本的创新发展之路

智慧环卫与智慧城市&#xff1a;以人文本的创新发展之路 前言智慧环卫与智慧城市 前言 智慧环卫和智慧城市的建设是当今社会发展的重要趋势&#xff0c;它们对于提升城市管理水平、改善居民生活质量具有至关重要的意义。随着国家政策对新型城市建设的大力推动&#xff0c;智慧…

python环境学习:pip 和 conda的区别和联系。哪个更好使用?pip创建虚拟环境并解释venv模块,pip的常用命令,conda的常用命令。

文章目录 一、pip介绍二、pip 和 conda 的区别与联系1、包管理器的功能2、下载包的来源3、 环境管理4、 安装速度和依赖管理5、联系6、实践中的使用 三、pip创建独立环境1、存在问题并提供解决方案a、问题b、解决方案1c、解决方案2 1、创建虚拟环境流程&#xff08;easy&#x…

Three 物体(三)

点&#xff08;Points&#xff09; 一个用于显示点的类。 由WebGLRenderer渲染的点使用 gl.POINTS。 构造器 Points( geometry : Geometry, material : Material ) geometry —— &#xff08;可选&#xff09;是一个Geometry或者BufferGeometry的实例&#xff0c;默认值是…

Android13 app后台无法启动Abort background activity starts from

总纲 android13 rom 开发总纲说明 目录 1.前言 2.log分析 3.代码查找分析 4.修改方法 5.编译测试 6彩蛋 1.前言 Android13 用户app后台无法启动,提示Abort background activity starts from 10111 2.log分析 08-07 21:37:36.703: W/ActivityTaskManager(440): Back…

保护网站安全,了解常见的几种网络攻击

随着互联网技术的迅猛发展&#xff0c;网站作为信息展示和交互的重要平台&#xff0c;面临着日益复杂的网络攻击威胁。从简单的口令入侵到复杂的分布式拒绝服务&#xff08;DDoS&#xff09;攻击&#xff0c;网络攻击手段层出不穷&#xff0c;给网站所有者带来了巨大的挑战。今…

完成控制器方法获取参数-@RequestParam

文章目录 1.将方法的request和response参数封装到参数数组1.SunDispatcherServlet.java1.根据方法信息&#xff0c;返回实参列表2.具体调用 2.测试 2.封装Http请求参数到参数数组1.自定义RequestParam注解2.MonsterController.java 增加参数3.SunDispatcherServlet.java1.resol…