在现代Web开发中，异步编程已成为一种常见的编程范式。无论是处理网络请求、文件读写还是延时操作，异步编程都能提供更流畅的用户体验。JavaScript作为一门单线程语言，其异步编程的实现尤为关键。本文将重点介绍JavaScript中处理异步编程的三个核心技术：Promise、async和await。我们将深入探讨它们的工作原理、使用方法以及如何在实际项目中高效地应用它们。
第一部分：PromisePromise 基础Promise是JavaScript中用于处理异步操作的一个关键概念。它代表了一个尚未完成但预期在将来完成的操作。使用Promise，可以避免所谓的“回调地狱”，即多层嵌套的回调函数，从而使代码更加清晰和易于维护。
代码示例：创建一个基本的Promise
let promise = new Promise(function(resolve, reject) { // 异步操作代码 setTimeout(() => { resolve("操作成功"); }, 1000);});promise.then((value) => { console.log(value); // 输出：操作成功});Promise 的状态一个Promise有三种可能的状态：
pending（待定） ：初始状态，既不是成功，也不是失败。fulfilled（已实现） ：意味着操作成功完成。rejected（已拒绝） ：意味着操作失败。代码示例：展示不同状态的Promises
let fulfilledPromise = Promise.resolve('成功');let rejectedPromise = Promise.reject('失败');fulfilledPromise.then(value => console.log(value)); // 输出：成功rejectedPromise.catch(error => console.log(error)); // 输出：失败链式调用和错误处理Promise的另一个优点是可以通过链式调用.then()和.catch()方法来处理复杂的异步流程。
代码示例：展示链式调用和错误处理
new Promise((resolve, reject) => { setTimeout(() => resolve(1), 1000);}).then(result => { console.log(result); // 输出 1 return result * 2;}).then(result => { console.log(result); // 输出 2 return result * 3;}).then(result => { console.log(result); // 输出 6 return result * 4;}).catch(error => { console.log('捕获到错误：', error);});实践应用在实际项目中，使用Promise可以有效管理异步操作，例如网络请求或文件处理。通过Promise，可以编写出更加可读和可维护的代码。
第二部分：Async/Awaitasync和await是建立在Promise之上的高级抽象，使得异步代码的编写和阅读更加接近于同步代码的风格。
Async 函数通过在函数声明前加上async关键字，可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then()和.catch()来处理它们的结果。
代码示例：创建一个async函数
async function asyncFunction() { return "异步操作完成";}asyncFunction().then(value => console.log(value)); // 输出：异步操作完成Await 关键字await关键字只能在async函数内部使用。它可以暂停async函数的执行，等待Promise的解决（resolve），然后以Promise的值继续执行函数。
代码示例：在async函数中使用await
async function asyncFunction() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("完成"), 1000) }); let result = await promise; // 等待，直到promise解决 (resolve) console.log(result); // "完成"}asyncFunction();错误处理在async/await中，错误处理可以通过传统的try...catch语句实现，这使得异步代码的错误处理更加直观。
代码示例：使用try...catch处理错误
async function asyncFunction() { try { let response = await fetch('http://example.com'); let data = await response.json(); // 处理数据 } catch (error) { console.log('捕获到错误：', error); }}asyncFunction();实践应用在实际应用中，async和await使得处理复杂的异步逻辑更加简单，尤其是在涉及多个依次执行的异步操作时。 前几年的版本时，浏览器执行过程中await 会阻塞后续代码，将后续的代码放入微任务队列中，但是现在的浏览器执行代码时会给紧跟在await关键字后的代码开小灶，相当于紧随在await关键字后的代码变成同步代码，但是再往后的代码依旧会被推入微任务队列。
在代码中的实际执行逻辑可以去到我的这篇文章：# 浅谈JavaScript面试题：从进程与线程到事件循环机制！！！
第三部分：Promise与Async/Await的比较虽然async/await在很多情况下可以提供更清晰和简洁的代码，但Promise也有其独特的优势。例如，处理多个并行异步操作时，Promise.all()通常是更好的选择。选择使用Promise或async/await通常取决于具体的应用场景和个人偏好。
结论理解和掌握Promise、async和await是成为一名高效JavaScript开发者的关键步骤。这些工具为处理复杂的异步操作提供了强大而灵活的方法。鼓励所有JavaScript开发者在项目中实践这些概念，以提高代码的可读性和维护性。
有什么说的不对的地方欢迎在评论区批评指正~
如果觉得写的不错，麻烦点个免费的赞吧！谢谢大家！
作者：雾野千里链接：https://juejin.cn/post/7320288262400311333
