js中的同步方法及异步方法
目录
1.代码说明
2.async修饰的方法和非async修饰的方法的区别
3.不使用await的场景
4.总结
1.代码说明
const saveTem = () => {// 校验处理const res = check()if (!res) {return}addTemplateRef.value.openModal()
}
这段代码中,check方法返回的是true和false,是一个普通方法,
openModal也是一个普通方法,没有返回值,
这段代码的执行顺序是依次执行的,因为没有任何异步操作,即使这个方法被async修饰,代码的执行顺序也是依次执行的
什么是异步操作,可以简单理解为方法被async修饰,axios及fetch请求及setTimeout方法等。
返回值为promise的方法不一定为异步方法,也就是说异步方法不能通过返回值进行判断
但是异步方法的返回值一定是promise,必须使用await或者.then才能获取实际返回值
2.async修饰的方法和非async修饰的方法的区别
1. 返回值不同
async 函数:
-
总是返回一个 Promise 对象
-
如果返回非 Promise 值,会自动用 Promise 包装
-
如果抛出异常,返回被拒绝(rejected)的 Promise
普通函数:
-
直接返回 return 语句指定的值
-
如果没有 return,返回 undefined
-
抛出异常会直接中断执行
2. 执行方式不同
async 函数:
-
内部可以使用 await 暂停执行,使用await后会等待后面的方法执行完成,再继续后续的内容
-
不会阻塞主线程
普通函数:
-
同步执行
-
会阻塞后续代码直到执行完成
async function asyncFunc() {console.log(1);await new Promise(resolve => setTimeout(resolve, 1000));console.log(2);
}function syncFunc() {console.log(1);setTimeout(() => console.log(2), 1000);console.log(3);
}asyncFunc(); // 输出: 1, 2 (1秒后)
syncFunc(); // 输出: 1, 3, 2 (1秒后)
3. 错误处理不同
async 函数:
-
抛出的错误会被捕获并转换为 rejected Promise
-
需要使用 try/catch 或 .catch() 捕获错误
普通函数:
-
错误会直接抛出
-
需要使用 try/catch 捕获同步错误
4. 调用方式不同
async 函数:
-
必须用 await 或 .then() 才能获取结果
-
直接调用会返回 Promise 对象而非实际结果
普通函数:
-
直接调用获取返回值
5. 适用场景
使用 async 函数的场景:
-
需要处理 Promise 链式调用,使用之前的.then会导致回调地狱问题,使用await可以让多个异步操作按照顺序执行,使代码更加整洁
-
需要顺序执行多个异步操作
-
需要更清晰的异步代码结构
使用普通函数的场景:
-
纯同步操作
示例
async function getData() {console.log('开始获取数据...'); // 1. 同步执行const result = await fetchData(); // 2. 遇到 await,暂停执行并等待 Promise 解决console.log(result); // 4. Promise 解决后继续执行return result; // 5. 返回结果(包装在 Promise 中)
}// 模拟异步函数
function fetchData() {return new Promise(resolve => {setTimeout(() => resolve('数据获取成功'), 1000); // 3. 1秒后解决 Promise});
}// 调用示例
getData().then(data => console.log('最终结果:', data)); // 6. 接收最终结果
详细执行流程:
-
同步阶段:
-
调用
getData()
函数 -
执行第一行
console.log('开始获取数据...')
(立即输出)
-
-
遇到 await:
-
执行
fetchData()
(返回一个 Promise) -
await
会暂停getData()
函数的执行,将控制权交回事件循环 -
此时
getData()
返回一个未解决的 Promise,pending状态的promise
-
-
异步等待:
-
fetchData()
中的setTimeout
开始计时(1秒) -
JavaScript 引擎可以处理其他任务
-
-
Promise 解决:
-
1秒后,
setTimeout
回调执行,Promise 被解决(resolve) -
await
接收到解决的值'数据获取成功'
-
getData()
函数恢复执行
-
-
继续执行 async 函数:
-
将解决的值赋给
result
-
执行
console.log(result)
(输出 "数据获取成功") -
执行
return result
(这里会包装成一个promise)
-
-
处理最终结果:
-
.then()
回调被执行,输出 "最终结果: 数据获取成功"
-
关键点说明:
-
await
会暂停当前 async 函数的执行(但不会阻塞主线程) -
async 函数在遇到第一个
await
时就会立即返回一个 Promise -
被暂停的函数会在 Promise 解决后从暂停点继续执行
-
return 的值会自动包装成 Promise
3.不使用await的场景
场景 1:明确需要 Promise
对象时
const fetchData = async () => { /* ... */ };// 需要传递 Promise 给其他逻辑
const promise = fetchData(); // 不 await,保留 Promise
promise.then((data) => { /* ... */ });
场景 2:并行多个异步任务(用 Promise.all
)
const getUser = async () => { /* ... */ };
const getPosts = async () => { /* ... */ };// 不单独 await,直接收集 Promises
const [user, posts] = await Promise.all([getUser(), getPosts()]);
关键点说明
-
并行执行:
getUser()
和getPosts()
会同时开始执行,而不是一个接一个执行。 -
Promise.all 的作用:
-
接收一个 Promise 数组作为输入
-
返回一个新的 Promise,当所有输入的 Promise 都解决(resolve)时,这个新 Promise 才会解决
-
解决值是一个数组,包含所有输入 Promise 的解决值,顺序与输入数组一致
-
-
解构赋值:
const [user, posts] = ...
将 Promise.all 返回的数组解构为两个变量
执行流程
-
调用
getUser()
和getPosts()
会立即返回两个 Promise 对象 -
这两个异步操作会同时开始执行(假设它们不互相依赖)
-
Promise.all
会等待这两个 Promise 都完成 -
当两者都完成后,结果会被解构到
user
和posts
变量中
与顺序执行的对比
如果写成这样就是顺序执行(不推荐):
const user = await getUser(); // 等待这个完成
const posts = await getPosts(); // 然后才开始这个
而使用 Promise.all
的方式总耗时大约等于较慢的那个操作的时间,而不是两者时间相加。
注意事项
-
如果其中一个 Promise 被拒绝(reject),整个
Promise.all
会立即拒绝 -
适合用于彼此独立的异步操作
-
如果操作之间有依赖关系,可能需要顺序执行
4.总结
方法中如果没有异步方法,按照顺序依次执行
如果有异步方法,没有使用await或者.then,不会依次执行,会先执行异步方法后面的方法,再执行异步方法
如果需要控制方法内,异步方法的顺序,可以使用await或者.then,需要注意如果要使用await,则方法必须被async修饰
使用async修饰的方法,返回值为promise,需要使用await或者.then获取返回值
返回值为promise不一定是异步方法,异步方法的返回值一定是promise
常见的异步方法为async修饰的方法,setimeout方法,axios方法,fetch方法
相关文章:
js中的同步方法及异步方法
目录 1.代码说明 2.async修饰的方法和非async修饰的方法的区别 3.不使用await的场景 4.总结 1.代码说明 const saveTem () > {// 校验处理const res check()if (!res) {return}addTemplateRef.value.openModal() } 这段代码中,check方法返回的是true和fal…...
C 语言_基础语法全解析_深度细化版
一、C 语言基本结构 1.1 程序组成部分 一个完整的 C 程序由以下部分组成: 预处理指令:以#开头,在编译前处理 #include <stdio.h> // 引入标准库 #define PI 3.14159 // 定义常量全局变量声明:在所有函数外部定义的变量 int globalVar = 10; // 全局变量函数定义…...
【Linux系列】dd 命令的深度解析与应用实践
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
ETL背景介绍_1:数据孤岛仓库的介绍
1 ETL介绍 1.1 数据孤岛 随着企业内客户数据大量的涌现,单个数据库已不再足够。为了储存这些数据,公司通常会建立多个业务部门组织的数据库来保存数据。比如,随着数据量的增长,公司通常可能会构建数十个独立运行的业务数据库&am…...
【周输入】510周阅读推荐-1
本号一年了,有一定的成长,也有很多读者和点赞。自觉更新仍然远远不够,需要继续努力。 但是还是要坚持2点: 在当前这个时代,信息大爆炸,层次不齐,不追加多, 信息输入可以很多&#x…...
Games101作业四
作业0到作业3的代码 这次是实现 de Casteljau 算法,以及绘制 Bezier 曲线,比上次简单 核心思想就是递归,原理忘了就去看第十一节课,从15:00开始的 GAMES101-现代计算机图形学入门-闫令琪 代码 先实现贝塞尔曲线 cv::Point2f recursive_bezier(const std::…...
从Aurora 架构看数据库计算存储分离架构
单就公有云来说,现在云数据面临的挑战有以下 5 个: 跨 AZ 的可用性与数据安全性。 现在都提多 AZ 部署,亚马逊在全球有 40 多个 AZ, 16 个 Region,基本上每一个 Region 之内的那些关键服务都是跨 3 个 AZ。你要考虑整个…...
ElasticSearch深入解析(十一):分页
在Elasticsearch中,常用的分页方案有from size、search_after和scroll三种,适用于不同场景。from size基于偏移量分页,是全局排序后的切片查询,适用于小数据量、浅分页场景,但深度分页性能差,且有默认上限…...
【MySQL】MySQL数据库结构与操作
目录 一. 数据库的概念 二. 数据库的分类 三. 初始MySQL数据库 四. 数据库操作 1)创建数据库 2) 查看数据库 3)选中数据库 4)删除数据库 五. SQL数据类型 1)整型和浮点型 2)字符串类型 3)时间…...
Vue框架的基本介绍
目录 一.Vue 1.概述 2.三大主流框架 3.优点: 二.Vue搭建 三.语法 1.基本框架 2.插值表达式 3.Vue指令 1.v-text: 2.v-html: 编辑3.v-model: 4.v-on: 5.v-show: 6.v-if: 7.v-else: 8.v-bind: 9.v-for: 一.Vue 1.概述 Vue是一款用于构建用户界面的渐进式的…...
Web 架构之攻击应急方案
文章目录 一、引言二、常见 Web 攻击类型及原理2.1 SQL 注入攻击2.2 跨站脚本攻击(XSS)2.3 分布式拒绝服务攻击(DDoS) 三、攻击检测3.1 日志分析3.2 入侵检测系统(IDS)/入侵防御系统(IPS&#x…...
xss-labs靶场基础8-10关(记录学习)
前言: 内容: 第八关 关卡资源网站,html编码网站(两个网站,一个是实体编号转义(只对特殊字符有效,字母无效)、实体符号转义) 在线Html实体编码解码-HTML Entity Encodi…...
arctanx 导数 泰勒展开式证明
你提供的推导内容非常清晰,条理分明。下面是对 d d x arctan x 1 1 x 2 \frac{d}{dx} \arctan x \frac{1}{1 x^2} dxdarctanx1x21 的总结与适当补充: ✅ 结论 d d x arctan x 1 1 x 2 \frac{d}{dx} \arctan x \frac{1}{1 x^2} dxda…...
基于Java的家政服务平台设计与实现(代码+数据库+LW)
摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本家政服务平台就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&a…...
SpringBoot的外部化配置
一、什么是外部化配置 外部化配置是指把应用程序中各种可配置的参数、属性等信息,从代码内部提取出来,放置在外部的配置文件、数据库或配置中心等地方(比如使用.properties、.yml 或.xml 等格式的文件)进行管理。提高应用程序的可…...
Java鼠标事件监听器MouseListener、MouseMotionListener和MouseWheelListener
Java鼠标事件监听器MouseListener、MouseMotionListener和MouseWheelListener java中创建鼠标,键盘的事件行为监听器的几种方法 这里以鼠标点击事件监听器为例,其他也是一样创建。 常用的消息监听器对象 1:点击事件监听器 ActionListener 2:按键事件监…...
第三方支付公司如何代付和入账?
通俗来说,就是企业把钱打到第三方公司账户上,再由第三方公司把钱打入客户指定账户。 那么第三方支付入账流程是怎样的呢? 第一,企业向第三方支付公司指定账户充值打款;第二,企业提交代付银行卡信息后台操…...
.NET8关于ORM的一次思考
文章目录 前言一、思路二、实现ODBC>SqlHelper.cs三、数据对象实体化四、SQL生成SqlBuilder.cs五、参数注入 SqlParameters.cs六、反射 SqlOrm.cs七、自定义数据查询八、总结 前言 琢磨着在.NET8找一个ORM,对比了最新的框架和性能。 框架批量操作性能SQL控制粒…...
LlamaIndex 第八篇 MilvusVectorStore
本指南演示了如何使用 LlamaIndex 和 Milvus 构建一个检索增强生成(RAG)系统。 RAG 系统将检索系统与生成模型相结合,根据给定的提示生成新的文本。该系统首先使用 Milvus 等向量相似性搜索引擎从语料库中检索相关文档,然后使用生…...
记录为什么LIst数组“增删慢“,LinkedList链表“查改快“?
数组(Array) 增删慢:对于数组来说,增加或删除元素的操作可能会比较慢,特别是当你需要在数组的开头或中间进行这些操作时。这是因为这些操作通常需要移动数组中的其他元素以保持连续性。例如,如果你想要在数…...
【论文阅读】Dip-based Deep Embedded Clustering with k-Estimation
摘要 近年来,聚类与深度学习的结合受到了广泛关注。无监督神经网络,如自编码器,能够自主学习数据集中的关键结构。这一思想可以与聚类目标结合,实现对相关特征的自动学习。然而,这类方法通常基于 k-means 框架&#x…...
ARFoundation 图片识别,切换图片克隆不同的追踪模型
场景搭建: 你可以把我的代码发给AI,去理解 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.XR; using UnityEngine.XR.ARFoundation; using UnityEngine.XR.ARSubsystems; using TMPro; using Unit…...
鸿蒙next播放B站视频横屏后的问题
(此文讨论范围为b站视频链接,且不包括b站直播链接;android/iOS的webview播放b站视频完全没有这么多问题) 1、竖屏播放没问题 从一个竖屏页p1点击进入视频页p2,p2页仍为竖屏; p2页有一Web组件,…...
华为0507机试
题目二 建设基站 有一棵二叉树,每个节点上都住了一户居民。现在要给这棵树上的居民建设基站,每个基站只能覆盖她所在与相邻的节点,请问信号覆盖这棵树最少需要建设多少个基站 #include <bits/stdc.h> using namespace std;const int …...
apache2的默认html修改
使用127.0.0.1的时候,默认打开的是index.html,可以通过配置文件修改成我们想要的html vi /etc/apache2/mods-enabled/dir.conf <IfModule mod_dir.c>DirectoryIndex WS.html index.html index.cgi index.pl index.php index.xhtml index.htm <…...
EXCEL下拉菜单与交替上色设置
Excel/WPS 表格操作教程(双功能整合) 目录 功能一:交替行上色 Excel 操作WPS 操作 功能二:下拉菜单设置 Excel 操作WPS 操作 组合效果示例注意事项 功能一:交替行上色 Excel 操作 选中数据区域 拖动鼠标选择需要设置…...
list基础用法
list基础用法 1.list的访问就不能用下标[]了,用迭代器2.emplace_back()几乎是与push_back()用法一致,但也有差别3.insert(),erase()的用法4.reverse()5.排序6.合并7.unique()(去重)8.splice剪切再粘贴 1.list的访问就不能用下标[]了,用迭代器…...
鸿蒙PC版体验_画面超级流畅_具备terminal_无法安装windows、linux软件--纯血鸿蒙HarmonyOS5.0工作笔记017
鸿蒙NEXT和开源鸿蒙OpenHarmony现在已经开发实现统一,使用鸿蒙ArkTS开发的应用,可以直接 在开源鸿蒙上. 鸿蒙的terminal是使用的linux的语法,但是有很多命令,目前还不能使用,常用的ifconfig等是可以用的. 鸿蒙终于出来PC版了,虽然,不像Windows以及mac等,开放的命令那么多,但…...
Spring 集成 SM4(国密对称加密)
Spring 集成 SM4(国密对称加密)算法 主要用于保护敏感数据,如身份证、手机号、密码等。 下面是完整集成步骤(含工具类 使用示例),采用 Java 实现(可用于 Spring Boot)。 一、依赖引…...
deepseek梳理java高级开发工程师微服务面试题
Java微服务高级面试题与答案 一、微服务架构设计 1. 服务拆分原则 Q1:微服务拆分时有哪些核心原则?如何解决拆分后的分布式事务问题? 答案: 服务拆分五大原则: 1. 单一职责原则(SRP)- 每个…...
人事管理系统8
员工管理(分页查询、查看详情页、修改): 1. 分页查询 Staff.java 中加入部门名和岗位名两个属性以及对应的 get 和 set 方法。这两个属性没有数据库字段对应, 仅供前端显示用: private String departname; //部门名属…...
Stapi知识框架
一、Stapi 基础认知 1. 框架定位 自动化API开发框架:专注于快速生成RESTful API 约定优于配置:通过标准化约定减少样板代码 企业级应用支持:适合构建中大型API服务 代码生成导向:显著提升开发效率 2. 核心特性 自动CRUD端点…...
第三章 初始化配置(一)
我们首先介绍配置Logback的方法,并提供了许多示例配置脚本。在后面的章节中,我们将介绍Logback所依赖的配置框架Joran。 初始化配置 在应用程序代码中插入日志请求需要大量的规划和努力。观察表明,大约4%的代码用于记录。因此,即…...
WebGIS 开发中的数据安全与隐私保护:急需掌握的要点
在 WebGIS 开发中,数据安全与隐私保护是绝对不能忽视的问题!随着地理信息系统的广泛应用,越来越多的敏感数据被存储和传输,比如个人位置信息、企业地理资产等。一旦这些数据泄露,后果不堪设想。然而,很多开…...
C语言 ——— 函数栈帧的创建和销毁
目录 寄存器 mian 函数是被谁调用的 通过汇编了解函数栈帧的创建和销毁 转汇编后(Add函数之前的部分) 转汇编后(进入Add函数之前的部分) 转汇编后(正式进入Add函数的部分) 编辑 总结 局部变量…...
2025年真实面试问题汇总(二)
jdbc的事务是怎么开启的 在JDBC中,事务的管理是通过Connection对象控制的。以下是开启和管理事务的详细步骤: 1. 关闭自动提交模式 默认情况下,JDBC连接处于自动提交模式(auto-commit true),即每条SQL语…...
【用「概率思维」重新理解生活】
用「概率思维」重新理解生活:为什么你总想找的「确定答案」并不存在? 第1层:生活真相——所有结果都是「综合得分」 现象:我们总想找到“孩子生病是因为着凉”或“伴侣生气是因为那句话”的单一答案现实:每个结果背后…...
Redis——线程模型·
为什么Redis是单线程却仍能有10w/秒的吞吐量? 内存操作:Redis大部分操作都在内存中完成,并且采用了高效的数据结构,因此Redis的性能瓶颈可能是机器的内存或者带宽,而非CPU,既然CPU不是瓶颈,自然…...
APS排程系统(Advanced Planning and Scheduling,高级计划与排程系统)
APS排程系统(Advanced Planning and Scheduling,高级计划与排程系统)是一种基于供应链管理和约束理论的智能生产管理工具,旨在通过动态优化资源分配和生产流程,解决制造业中的复杂计划问题。以下是其核心要点解析&…...
首个窗口级无人机配送VLN系统!中科院LogisticsVLN:基于MLLM实现精准投递
导读 随着智能物流需求日益增长,特别是“最后一公里”配送场景的精细化,传统地面机器人逐渐暴露出适应性差、精度不足等瓶颈。为此,本文提出了LogisticsVLN系统——一个基于多模态大语言模型的无人机视觉语言导航框架,专为窗户级别…...
仓颉Magic亮相GOSIM AI Paris 2025:掀起开源AI框架新热潮
巴黎,2025年5月6日——由全球开源创新组织GOSIM联合CSDN、1ms.ai共同主办的 GOSIM AI Paris 2025 大会今日在法国巴黎盛大开幕。GOSIM 作为开源人工智能领域最具影响力的年度峰会之一,本届大会以“开放、协作、突破”为核心,汇聚了来自华为、…...
《Effective Python》第2章 字符串和切片操作——深入理解Python 中的字符数据类型(bytes 与 str)的差异
引言 本篇博客基于学习《Effective Python》第三版 Chapter 2: Strings and Slicing 中的 Item 10: Know the Differences Between bytes and str 的总结与延伸。在 Python 编程中,字符串处理是几乎每个开发者都会频繁接触的基础操作。然而,Python 中的…...
windows 强行终止进程,根据端口号
步骤1:以管理员身份启动终端 右键点击开始菜单 → 选择 终端(管理员) 或 Windows PowerShell(管理员)。 步骤2:检测端口占用状态 # 查询指定端口(示例为1806) netst…...
PHP-FPM 调优配置建议
1、动态模式 pm dynamic; 最大子进程数(根据服务器内存调整) pm.max_children 100 //每个PHP-FPM进程大约占用30-50MB内存(ThinkPHP框架本身有一定内存开销)安全值:8GB内存 / 50MB ≈ 160,保守设置为100 ; 启动时创建的进程数&…...
我喜欢的vscode几个插件和主题
主题 Monokaione Monokai Python 语义高光支持 自定义颜色为 self 将 class , def 颜色更改为红色 为装饰器修复奇怪的颜色 适用于魔法功能的椂光 Python One Dark 这个主题只在python中效果最好。 我为我个人使用做了这个主题,但任何人都可以使用它。 插件 1.Pylance Pylanc…...
openharmony 地图开发(高德sdk调用)
1.显示地图 2.利用sdk完成搜索功能,以列表形式展示,并提供定位和寻路按钮 3.利用sdk完成寻路,并显示路线信息和画出路线,路线和信息各自点击后可联动到对方信息显示 4.调用sdk 开始导航 商务合作:...
Kotlin-类和对象
文章目录 类主构造函数次要构造函数总结 对象初始化 类的继承成员函数属性覆盖(重写)智能转换 类的扩展 类 class Student { }这是一个类,表示学生,怎么才能给这个类添加一些属性(姓名,年龄…)呢? 主构造函数 我们需要指定类的构造函数。构造函数也是函数的一种,但是它专门…...
LVS+keepalived实战案例
目录 部署LVS 安装软件 创建VIP 创建保存规则文件 给RS添加规则 验证规则 部署RS端 安装软件 页面内容 添加VIP 配置系统ARP 传输到rs-2 客户端测试 查看规则文件 实现keepalived 编辑配置文件 传输文件给backup 修改backup的配置文件 开启keepalived服务 …...
可视化+智能补全:用Database Tool重塑数据库工作流
一、插件概述 Database Tool是JetBrains系列IDE(IntelliJ IDEA、PyCharm等)内置的数据库管理插件。它提供了从数据库连接到查询优化的全流程支持,让开发者无需离开IDE即可完成数据库相关工作。 核心价值: 统一工作环境…...
【认知思维】沉没成本谬误:为何难以放弃已投入的资源
什么是沉没成本谬误 沉没成本谬误(Sunk Cost Fallacy)是指人们倾向于根据过去已经投入的资源(时间、金钱、精力等)而非未来收益来做决策的一种认知偏差。简单来说,它反映了"我已经投入这么多,不能就这…...