【前端面试常问】Promise与Async/Await

Promise与Async/Await 🚀

JavaScript中的两个重要概念——Promise和Async/Await,它们是我们处理异步编程时不可或缺的工具,让我们能够更优雅地驾驭回调地狱 💀。

🌟 Promise

一个Promise对象代表了一个现在、将来或永远可能可用,也可能不可用的值。它有三种状态:pending(进行中)、fulfilled(已成功)或rejected(已失败)。

// 创建一个Promise实例
const myPromise = new Promise((resolve, reject) => {if (/* 异步操作成功 */) {resolve('Success! 😃');} else {reject('Failed! 😔');}
});// 使用then方法处理成功或失败的结果
myPromise.then(result => console.log(result)) // 输出: 'Success! 😃'.catch(error => console.log(error));       // 如果失败,输出: 'Failed! 😔'

🌟 Async/Await

Async/AwaitES2017引入的新特性,它是基于Promise的语法糖,使得异步代码看起来更像同步代码,更加易读易懂。

// 定义一个异步函数
async function fetchInfo() {try {const response = await fetch('https://api.example.com/data'); // 等待fetch请求完成const data = await response.json(); // 再等待解析JSON数据console.log('Data fetched successfully! 😎', data);} catch (error) {console.error('Error fetching data! 😱', error);}
}// 调用异步函数
fetchInfo();

在上面的代码中,async关键字声明了一个异步函数,await关键字用于等待Promise的结果。如果Promise成功,它将返回结果;如果失败,则抛出异常,可以被catch捕获。

总结起来,Promise像是封装了异步操作的盒子,而Async/Await则是打开这个盒子并取出结果的钥匙🔑。两者结合,极大地改善了JavaScript异步编程的体验,让我们的代码变得更加清晰、简洁和易于维护。🎉


🧐 深入Promise

链式调用 & 链式处理

Promise的一个强大之处在于它可以进行链式调用,通过.then().catch()方法将多个异步操作串联起来,形成一个执行流程

const firstPromise = new Promise((resolve, reject) => {setTimeout(() => resolve('First Step'), 1000); // 模拟异步操作
});firstPromise.then(result => console.log(result)) // 输出: 'First Step'.then(() => {return new Promise((resolve, reject) => {setTimeout(() => resolve('Second Step'), 500);});}).then(result => console.log(result)) // 输出: 'Second Step'.catch(error => console.log(error)); // 处理错误

Promise.all() 和 Promise.race()

  • Promise.all(iterable)接受一组Promise并返回一个新的Promise只有当所有 Promise 都成功时才会变为 resolved ,否则只要有任意一个 Promise 失败则整体失败。
let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {setTimeout(resolve, 100, 'foo');
});Promise.all([promise1, promise2, promise3]).then((values) => {console.log(values); // [3, 42, "foo"]
});
  • Promise.race(iterable)同样接受一组Promise只要有一个 Promise 率先改变状态(无论是 fulfilled 还是 rejected ),那么 race 方法返回的 Promise 也会立刻改变状态并返回那个率先改变状态的 Promise 的结果。
let p1 = new Promise((resolve, reject) => setTimeout(reject, 500, 'p1'));
let p2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'p2'));Promise.race([p1, p2]).then(value => console.log(value), reason => console.log(reason)
); // 输出: 'p2',因为p2先完成

🔍 深入Async/Await

📚 try/catch块内的await

async函数内部,任何返回Promise的表达式都可以放在await后面,它会暂停函数执行,直到Promise完成。如果Promise被reject,那么await表达式将会抛出一个异常,可以在try/catch块内捕获。

async function asyncFunction() {try {let response = await fetch('https://api.example.com/data');let data = await response.json();console.log(data);} catch (error) {console.error('Fetch failed:', error);}
}

📒 Async/Await与Promise的转换

Async函数实际上会返回一个Promise,这意味着我们可以用Promise的方法来处理其结果。

async function getData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}getData().then(data => console.log(data)); // 直接使用Promise的then方法处理结果

🧪深入Promise的高级特性与应用场景

Promise.resolve() 和 Promise.reject()

这两个静态方法可以帮助我们快速创建已确定状态的Promise对象。

// 创建一个立即resolve的Promise
let resolvedPromise = Promise.resolve('Resolved immediately!');resolvedPromise.then(result => console.log(result)); // 输出: 'Resolved immediately!'// 创建一个立即reject的Promise
let rejectedPromise = Promise.reject(new Error('Rejected immediately!'));rejectedPromise.catch(error => console.log(error.message)); // 输出: 'Rejected immediately!'

Promise.prototype.finally()

finally方法允许我们在Promise无论最终状态如何(resolved或者rejected)都会执行的回调函数,通常用来做资源清理等操作。

let someAsyncWork = () => new Promise((resolve, reject) => {setTimeout(() => {resolve('Async work done!');}, 1000);
});someAsyncWork().then(result => console.log(result)).catch(error => console.log(error)).finally(() => console.log('This will always run regardless of the outcome')); // 总是会被执行

💡深入Async/Await的高级用法

Async/Await配合for循环与数组迭代

Async/Await可以很好地配合for循环以及数组的各种迭代方法(如map, reduce, forEach等)来处理批量异步任务。

async function processUrls(urls) {for (const url of urls) {try {let response = await fetch(url);let data = await response.json();console.log(`Fetched data from ${url}:`, data);} catch (error) {console.error(`Failed to fetch data from ${url}:`, error);}}
}processUrls(['https://api.example1.com/data', 'https://api.example2.com/data']);

🪐 总结

PromiseAsync/Await都是JavaScript处理异步操作的重要工具,它们都旨在解决回调地狱的问题,提高代码的可读性和可维护性。以下是它们的主要区别:

  1. 语法风格

    • Promise 采用链式调用的方式,通过.then().catch()方法来指定成功和失败的回调函数,连续的异步操作可能会导致多层嵌套。
    • Async/Await 则引入了新的语法特性,使得异步代码看起来更像是同步代码,通过async关键字标记函数,并在函数内部使用await关键字等待Promise的结果。这样可以避免回调函数的嵌套,使得代码更加扁平化和易读。
  2. 错误处理

    • Promise 必须通过.catch()方法来处理错误,如果不这样做,未捕获的错误会在Promise链中传播。
    • Async/Await 允许使用传统的try...catch结构来处理错误,这使得错误处理逻辑更加直观和易于理解。
  3. 代码组织与流程控制

    • Promise 可以利用.all().race()等静态方法同时处理多个异步操作,而Async/Await在处理多个异步任务时通常需要借助循环或其他结构来实现类似的并行效果。
    • Async/Await 能够更好地模拟同步代码流程,可以在单个函数内部顺序执行多个异步操作,逻辑更清晰。
  4. 底层机制

    • Async/Await 是基于Promise构建的,也就是说,await后面接的表达式必须是Promise对象,如果不是,则会被转换为已解决的Promise。因此,Async/Await实际上是Promise API的语法糖,它让异步编程体验更为流畅。
  5. 兼容性与适用场景

    • PromiseES6标准的一部分,现代浏览器和Node.js环境对其有广泛支持,对于旧版环境可以通过polyfill添加支持。
    • Async/AwaitES7(ES2017)引入的特性,同样需要现代环境支持,尽管相对较新,但它由于其简洁的语法和更好的可读性,在许多项目中被优先选用。

综上所述,Async/Await在很大程度上提升了编写异步JavaScript代码的便利性和可读性,但它本质上依赖于Promise来实现异步逻辑,只是提供了更高级别的抽象。开发者可以根据项目的具体需求和技术栈选择合适的异步编程模型。

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

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

相关文章

Python机器学习项目开发实战:怎么处理图像内容分析

注意:本文的下载教程,与以下文章的思路有相同点,也有不同点,最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程:Python机器学习项目开发实战_图像内容分析_编程案例解析实例详解课程教程.pdf Python在机器学习…

剑指Offer题目笔记32(拓扑排序)

面试题113: 解决方案: 将课程看成图中的节点,如果两门课程存在先修顺序那么它们在图中对应的节点之间存在一条从先修课程到后修课程的边,因此这是一个有向图。可行的修课序列实际上是图的拓扑排序序列。图中的每条边都是从先修课…

Web前端框架/库/工具

前言 前端从步枪(原生js)到了半自动武器(jQuery)并进化为全自动武器(三大框架(angular,react,vue及其生态链))。 常说工欲善其事必先利其器。对于那些想要提…

【c++11】看完立马就懂--右值引用!!!

右值引用 一、什么是右值?什么是左值?二、右值引用三、右值引用的好处四、万能引用五、完美转发 一、什么是右值?什么是左值? 首先,当我们看到右值的时候,我们很自然的就会产生疑问? 什么的右边…

黑马鸿蒙学习5:LIST容器

LIST容器,其实就是如果FOREACH容器展示不全的话,会自动有滚动条了。要注意的是,LIST中必须有固定的listitem这个项,而且列表里面只能包含一个根组件。 必须把ROW容器放到listitem中,如下:

51、图论-岛屿数量

思路: 该问题要求在一个由 1(表示陆地)和 0(表示水)组成的二维网格中,计算岛屿的数量。岛屿被水包围,并且通过水平或垂直连接相邻的陆地可以形成。这个问题的核心是识别并计数网格中相连的陆地…

CSV解析

一直以为csv靠逗号(,)分割数据,那么只要用str.spilt(,,row)便可以将数据分割开。 事实证明想简单了,csv里还有这样的规定,如果数据内有双引号(")和逗号(,)那么&…

车载电子电器架构 —— 售后诊断开发

车载电子电器架构 —— 售后诊断开发 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己…

2024.4.21

网络聊天室-------服务器端 #include "head.h" #define SER_IP "192.168.125.100" #define SER_PORT 8888 int main(int argc, const char *argv[]) {//1.创建结构体int sfdsocket(AF_INET,SOCK_DGRAM,0);if(sfd-1){perror("socket");return -1…

在Postgres中,如何有效地管理大型数据库的大小和增长

文章目录 一、定期清理和维护1. VACUUM和ANALYZE2. 删除旧数据和归档 二、分区表三、压缩数据四、配置优化1. 调整维护工作负载2. 监控和日志 五、使用外部存储和扩展1. 外部表和FDW2. 扩展和插件 六、定期备份和恢复测试结论 管理大型数据库的大小和增长是数据库管理员&#x…

Java中的变量与常量

标识符 Java语言规定标识符由任意顺序的字母、下划线(_)、美元符号($)和数字组成,并且第一个字符不能是数字。标识符也不能是Java中的关键字(保留字)。 在Java语言中,标识符的字母…

golang封装发送邮件的代码

golang封装一个发送邮件的代码 golang发送邮件非常简单,下面是一个封装好的代码,只需要把这两个文件放到一个包里,就可以直接使用 email.go package emailimport ("context""github.com/go-playground/validator/v10"…

环境监测系统--------MQ系列气体检测模块驱动教程(保姆级教程)

⏩ 大家好哇!我是小光,嵌入式爱好者,一个想要成为系统架构师的大三学生。 ⏩在环境检测中我们经常会用到检测气体的传感器,检测乙醇、甲烷、一氧化碳、氢气等等,博主呕心沥血对MQ系列传感器做一个史上最详细的使用教程…

网络安全产品---堡垒机

what 在网上搜索 运维审计与风险控制系统就是是堡垒机 我认为的堡垒机就是提供高效运维、认证管理、访问控制、安全审计和报表分析功能的云服务设备 实现高效运维的同时最大程度控制运维风险。 how 能够对运维人员维护过程进行全面跟踪、控制、记录、回放 支持细粒度配置…

政企版 WPS Pro 专业版注册安装教程

政企版 WPS Pro 专业版安装及激活步骤 第 1 步:下载压缩包(内含注册码)【无解压密码】。 第 2 步:解压缩后,运行 exe 文件,默认步骤安装即可。 第 3 步:安装完成后,新建一个 Word …

【AI面试】工作和面试过程中,经常遇到的其他问题汇总二(持续更新)

本篇是延续第一篇:【AI面试】工作和面试过程中,经常遇到的其他问题汇总一(持续更新) 如果你还没有看过上一篇文章,建议先去看看,尽管这两篇文章没有什么交集。 一、在CNN和transformer的训练过程中,学习率的调整,有什么经验? 在训练卷积神经网络(CNN)和Transform…

使用QQ邮箱进行登录验证

使用场景不多说,接下来直接看实现~ 登录到QQ邮箱,进入设置 打开IMAP/SMTP服务,记得把授权码记录下来,后面配置文件中需要用到 新建application的配置文件 spring:mail:# 指定邮件服务器地址host: smtp.qq.comusername: 你自己的q…

ROS 2边学边练(31)-- 管理大工程

前言 往往现实中的工程都是会包含很多节点很多参数很多主题的那种,如果单独通过各种ros2 run命令进行启动管理,恐怕难以招架,主要还是通过launch文件的方式进行管理,而launch文件也可以像节点那样按功能的不同模块化,最…

【学习】黑盒测试用例设计方法都有哪些

在软件测试中,黑盒测试是一种重要的测试方法,它专注于软件的外部行为,而不关心其内部结构和实现。黑盒测试的目标是确保软件的功能符合需求规格说明书中的要求。为了有效地进行黑盒测试,需要设计合理的测试用例。本文将详细介绍黑…

RocketMQ的设计理念和目标

一、设计理念: RocketMQ设计基于主题的发布与订阅模式,其核心功能包括消息发送、消息存储(broker)、消息消费,整体设计追求简单与性能统一,主要体现在以下三个方面。 1.1、NameServer设计,摒弃…