《告别回调地狱！三种写法带你玩转 JavaScript 异步》

_一两风2025-08-13 13:41

🚀 从回调地狱到优雅异步：三种写法带你一步步进化

在前端开发中，我们经常会遇到这样的需求：

获取用户信息
根据用户 ID 获取订单信息
根据订单 ID 获取物流信息

这是一个典型的"多步骤依赖"的异步任务，如果用不同的方式实现，会有完全不同的代码风格和可维护性。

今天，我们就用同一个例子，演示 回调写法 → Promise → async/await 三种方式的演变，让你彻底告别"回调地狱"。

你觉得这三种写法哪个更好理解理解？把你的想法打在评论区！

1.回调写法

2.promise 写法

3.async/await 写法

语法介绍

Promise：

一句话 ： Promise 是JavaScript 用来处理 异步函数 的一种机制，让你避免"回调地狱"(callback hell)。

Promise 的状态

一个Promise有三种可能的状态：

pending（待定） ：初始状态，既不是成功，也不是失败。
fulfilled（已实现） ：意味着操作成功完成。
rejected（已拒绝） ：意味着操作失败。

代码示例：展示不同状态的Promises

ini 复制代码

let fulfilledPromise = Promise.resolve('成功');
let rejectedPromise = Promise.reject('失败');

fulfilledPromise.then(value => console.log(value)); // 输出：成功
rejectedPromise.catch(error => console.log(error)); // 输出：失败

async 和 await：

一句话 ：async/await 是 Promise 的语法糖，让异步代码看起来像同步代码。

async：

通过在函数声明前加上async关键字，可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then()和.catch()来处理它们的结果。

await：

await在 async 函数内部使用 await 关键字可以暂停函数的执行，等待一个 Promise 被解决（resolve）或拒绝（reject），之后再继续执行后续代码，从而使异步代码看起来更像同步代码，提升可读性。