🚀 从回调地狱到优雅异步:三种写法带你一步步进化
在前端开发中,我们经常会遇到这样的需求:
- 获取用户信息
- 根据用户 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),之后再继续执行后续代码,从而使异步代码看起来更像同步代码,提升可读性。