在程序中,之所以不能将一个异步函数的返回值,直接当作最终结果来使用,其根本原因在于异步函数的设计契约,决定了它返回的永远不是那个“未来的、真实的”计算结果,而是一个代表了“未来”本身的、特殊的“承诺”对象。这种看似“绕路”的设计,是现代编程语言,为了在“单线程”环境中,实现“非阻塞”高效运行的核心机制。这个过程主要涉及五个关键点:因为异步函数的返回值被“自动包装”成了一个“承诺”对象、这个“承诺”对象是一个表示“未来结果”的“占位符”、直接访问得到的是“承诺”本身而非其“最终值”、必须通过.then方法或await关键字来“异步地”获取其结果、以及这是为了维持程序主线程“非阻塞”运行的核心设计。

具体来说,当你调用一个异步函数时,它会立即返回一个“承诺”对象,然后,程序的“主线程”会继续执行后续代码,而不会停下来等待。那个真正耗时的操作(例如,网络请求),则在后台进行。因此,如果你试图,立即地,去使用那个返回值,你操作的,只是那个代表“承诺”的“占位符”,而非那个尚未到达的、真正的“数据”,这必然会导致非预期的结果或程序错误。
一、问题的“本质”:同步思维与异步现实的“冲突”
要理解这个问题的本质,我们必须首先,在思维模式上,清晰地区分“同步”与“异步”这两个编程世界的“基本法则”。
1. 同步函数的“世界”:所见即所得
在我们编程的启蒙阶段,我们所接触的,几乎都是“同步”函数。它的行为,与我们的日常直觉,完全一致。
JavaScript
function add(a, b) {
return a + b;
}
let result = add(5, 3); // 程序会“停”在这里,直到add函数完成计算
console.log(result); // 此刻,result中,已是确定的、最终的结果 8
在这个“同步”的世界里,代码的执行顺序,是严格的、线性的、“所见即所得”的。=号的右边,必须被完全地、彻底地计算出最终结果之后,这个结果,才会被赋值给左边的变量。
2. 异步函数的“世界”:立即返回的“凭证”
然而,当程序需要处理一些“耗时”的操作时(例如,一次需要等待数百毫秒的网络请求、或一次需要数秒钟的文件读写),“同步”模式,就会带来灾难性的后果。如果主线程,在一个耗时的操作上“阻塞”住了,那么,整个应用程序(特别是图形用户界面),都将“冻结”,无法响应用户的任何操作。
为了解决这个问题,“异步”编程模型,应运而生。 在一个异步函数中,其核心的“行为契约”,发生了根本性的改变:
JavaScript
async function fetchData() {
// ... 假设这里,有一个耗时1秒的、异步的网络请求 ...
return "这是服务器返回的数据";
}
let result = fetchData(); // 程序“不会”停在这里!
console.log(result); // 此刻,result中,是什么?
当我们,调用一个异步函数fetchData时,它不会停下来,去等待那个耗时1秒的网络请求。恰恰相反,它会立即地,向我们,返回一个“东西”,然后,程序的“主线程”,就继续,向下执行了。这个被“立即返回”的“东西”,并非我们最终想要的那个字符串"这是服务器返回的数据",而是一个特殊的、代表了“未来的、尚未到达的结果”的“占位符”或“凭证”。这个“凭证”,在现代JavaScript中,就是一个“承诺”对象。
因此,试图,用“同步”的思维,去直接地,使用一个“异步”函数的返回值,是导致所有此类问题的、最根本的“认知错位”。
二、异步函数的“契约”:它到底返回了什么?
要正确地处理异步函数的返回值,我们必须,首先,深刻地,理解它的这个“官方指定”的返回物——“承诺”。
1. 返回值永远是“承诺”
一个函数,一旦被async关键字所修饰,它的“返回契约”,就发生了如下改变:
如果你,在函数内部,return 5;(返回一个普通值),那么,这个函数,实际的、对外的返回值,是 Promise.resolve(5),即一个**立即“兑现”**的、其值为5的承诺。
如果你,在函数内部,return aPromise;(返回另一个承诺),那么,这个函数,实际的返回值,就是你返回的那个承诺。
如果你,在函数内部,抛出了一个“错误”,那么,这个函数,实际的返回值,是一个**立即“拒绝”**的、其原因为该错误的承诺。
结论:异步函数的返回值,永远,都是一个“承诺”对象,无一例外。
2. “承诺”是什么?
一个“承诺”,是JavaScript中,一个用于表示“异步操作”最终结果的内置对象。它像一个“信封”,在其被创建时,是“空的”(我们不知道里面的信,是好消息还是坏消息)。在未来的某个时刻,当那个异步的操作,有了结果之后,这个“信封”,才会被“填满”。
一个“承诺”,在其生命周期中,必然会处于以下三种状态之一:
进行中:异步操作,尚未完成,结果未知。
已兑现(或称‘已成功’):异步操作,已成功完成,并携带回了一个“最终值”。
已拒绝(或称‘已失败’):异步操作,因某种原因,失败了,并携带回了一个“失败原因”(通常是一个错误对象)。
一个承诺的状态,只能,从“进行中”,变为“已兑现”或“已拒绝”,且这个转变,是一次性的、不可逆的。
三、错误的“交互”方式
理解了异步函数返回的是一个“承诺”对象后,我们就能清晰地,分析出,为何“直接使用”是错误的。
错误的代码示例:JavaScriptasync function fetchUserProfile() { // 模拟一个耗时1秒的网络请求 await new Promise(resolve => setTimeout(resolve, 1000)); return { name: "张三", age: 30 }; } function displayUserProfile() { const user = fetchUserProfile(); // 错误!user变量,在这一刻,得到的是一个“承诺”对象 // 程序不会等待1秒,而是立即执行下一行 console.log(user.name); // 致命错误! } displayUserProfile();
执行过程分析:
displayUserProfile被调用。
fetchUserProfile()被调用。因为它是一个异步函数,它立即,返回一个处于“进行中”状态的“承诺”对象。这个对象,被赋值给了变量user。
程序,立即,执行下一行console.log(user.name);。
此时,它试图,去访问一个“承诺”对象的name属性。然而,“承诺”对象自身,并不存在一个名为name的属性。
因此,user.name的求值结果,是undefined(未定义)。
在某些更复杂的情况下,如果你试图,去调用user.name.trim(),那么,就会因为“无法读取未定义的属性‘trim’”,而直接导致程序崩溃。
四、正确的“解包”方法一:.then() 链式调用
既然我们拿到的,是一个装着“未来结果”的“信封”(承诺),那么,我们就需要一种异步的机制,来“拆开”这个信封,并获取其中的内容。.then()方法,正是为此而生的、最基础的“拆信”工具。
.then()的用法:.then()方法,接收一个“回调函数”作为参数。这个回调函数,不会被立即执行。它会被“注册”到那个“承诺”对象之上。只有当,在未来的某个时刻,这个“承诺”,的状态,从“进行中”,变为“已兑现”时,这个被注册的回调函数,才会被自动地,调用,并且,那个“已兑现”的、最终的结果值,会作为参数,传递给这个回调函数。
重构后的代码:JavaScriptfunction displayUserWithThen() { const userPromise = fetchUserProfile(); // 我们对这个“承诺”,注册了一个“后续处理” userPromise.then(user => { // 这部分代码,将会在大约1秒后,当承诺兑现时,才会被执行 // 此时,这里的“user”变量,才是那个我们真正想要的、包含了name属性的对象 console.log(user.name); // 正确输出 "张三" }); } displayUserWithThen();
错误处理:与.then()配对的,还有一个.catch()方法,它同样,接收一个回调函数,用于处理,当“承诺”的状态,变为“已拒绝”时的情况。
五、正确的“解包”方法二:await 关键字
如果说.then()链式调用,是异步编程的“手动挡”,那么,async/await语法,就是其更高级、更易于驾驶的“自动挡”。
1. await的运行机制 await关键字,可以被理解为,是.then()方法的一种更简洁、更符合同步思维的“语法糖”。
当解释器,在一个异步函数中,遇到await somePromise这行代码时,它会:
暂停,当前这个异步函数的执行。
等待,其后的somePromise这个“承诺”对象,的状态,变为“已兑现”或“已拒绝”。
如果,“承诺”被“兑现”了,那么,await表达式,会“解包”出那个“已兑现”的值,并作为其结果,返回。
如果,“承诺”被“拒绝”了,那么,await表达式,会将其“拒绝原因”(通常是一个错误对象),作为“异常”,抛出。
然后,当前这个异步函数,再从被暂停的地方,恢复执行。
重构后的代码:JavaScriptasync function displayUserWithAwait() { try { console.log("即将开始获取用户..."); // await,会“暂停”此函数的执行,直到fetchUserProfile的承诺,有了结果 const user = await fetchUserProfile(); // 当代码,执行到这一行时,user变量,已经,就是那个我们最终想要的、具体的对象了 console.log(user.name); // 正确输出 "张三" } catch (error) { console.error("获取用户失败:", error); } } displayUserWithAwait();
2. 关键规则:await必须在async函数内部使用 这是一个必须被严格遵守的语法规则。你不能,在一个“普通”的、非异步的函数中,直接使用await关键字。这意味着,“异步性”,是具有“传染性”的。一旦一个流程的某个环节,变成了异步,那么,所有需要“等待”这个环节结果的、上游的调用者,也必须,相应地,被改造为“异步”的。
六、在实践中“管理”异步
统一团队的异步风格:团队的编码规范中,应明确地,推荐或强制,优先使用async/await的语法风格,来处理所有新的异步代码,因为它在“可读性”上,具有无可比拟的优势。这份规范,可以被沉淀和共享知识库中。
代码审查的关注点:在进行代码审查时,审查者,应特别关注,是否存在对异步函数调用的返回值,进行了“同步”的、错误的直接使用。
常见问答 (FAQ)
Q1: async函数一定会是“异步”执行的吗?
A1: 不一定。如果一个异步函数中,不包含任何await关键字,或任何其他真正的异步操作,那么,它的执行,实际上,是完全同步的。只不过,其返回值,依然会被自动地,包装成一个“立即兑现”的“承诺”对象。
Q2: 既然async/await更简洁,为什么还需要了解Promise的.then()?
A2: 因为async/await是建立在“承诺”机制之上的“语法糖”,理解其底层原理,有助于我们,写出更健壮的代码。此外,在一些不适合或无法使用async函数的场景下(例如,一些旧的代码库或特定的回调函数中),我们仍然需要,直接地,使用.then()来进行异步流程的控制。
Q.3: 我能否在一个非async的普通函数中,直接获取到异步函数的结果?
A3: 不能。这是异步编程的“铁律”。一旦一个值,进入了“异步”的世界(即被包装成了一个“承诺”),你就永远无法,再通过一个“同步”的方式,来直接地,将其“解包”出来。你只能,通过.then()或await,以一种“异步回调”的方式,来消费这个值。
Q4: 什么是“承诺地狱”?
A4: “承诺地狱”,是指在错误地,或过度地,使用.then()的嵌套时,所产生的一种,类似于“回调地狱”的、难以阅读的代码结构。虽然比回调地狱稍好,但它同样,可以通过async/await或更扁平化的链式调用,来进行优化。
文章包含AI辅助创作,作者:mayue,如若转载,请注明出处:https://docs.pingcode.com/baike/5215083