case - A
const BASE_URL = "https://bootcamp-api.codeit.kr/api";
export async function fetchData(endpoint) {
const response = await fetch(`${BASE_URL}/sample/${endpoint}`);
if (!response.ok) {
throw new Error("Fail");
}
return await response.json();
}
export async function getFolders() {
return await fetchData("folder");
}
export async function getUserProfile() {
return await fetchData("user");
}
字符串
case - B
const BASE_URL = "https://bootcamp-api.codeit.kr/api";
export async function fetchData(endpoint) {
const response = await fetch(`${BASE_URL}/sample/${endpoint}`);
if (!response.ok) {
throw new Error("Fail");
}
return await response.json();
}
export function getFolders() {
return fetchData('folder');
}
export function getUserProfile() {
return fetchData('user');
}
型
行动上有什么不同?
已编辑
为什么我们不需要在 case B 中添加'alert c'和'await'关键字?
这些案子都是一样的
3条答案
按热度按时间a64a0gku1#
一个pixelc函数返回一个promise。但是如果一个promise从它返回,那么就不需要
async
,因为一个promise无论如何都会返回。出于同样的原因,你永远不应该执行
return await
,因为你延迟了当前流的执行,而不是立即返回。基本上,在这种情况下,你无论如何都会返回一个promise,但带有已解析的值。返回值甚至可以被调用者丢弃,所以如果你执行return await
,它甚至可能会影响性能。永远不要执行return await
。情况B是正确的,但应该通过删除来修复。return await
:字符串
vbkedwbf2#
在这两种情况下,代码的工作原理是一样的,但是有一点需要注意,标记一个函数
async
可以保证这个函数是一个Promise
,在你的代码中,这不太可能是一个问题,除非你拼错了fetchData
,调用者使用的是then
/catch
等。eg.
字符串
请注意,在
test2
中,错误是如何被处理的。如果纯粹使用async/await
,这种差异并不重要,因为try / catch
逻辑可以处理这两种情况。因此,在某些方面,
case A
可以为您提供一点额外的代码安全性,特别是如果函数混合了async
和sync
,并且您还使用了.then, .catch
处理程序。这样做会对性能造成一个小的影响,当我说小的时候,我的意思是小,(但在紧循环中肯定会累加起来)基本上,在您的示例中创建了一个额外的Promise,它返回一个Promise。您也可以说注解中提到的
case - A
也提供了有关Intent的更多细节,IOW:在案例B中,除非您阅读程式码并知道fetchData
也是Promise
,但在Case A
中,它会传回Promise,否则没有任何迹象显示此函数会传回Promise。mrphzbgm3#
在第一种情况下(getData或getUserProfile),await关键字确保函数在继续之前等待fetchData promise被解析。
在第二种情况下,函数立即返回未解析的promise。如果你想处理fetchData操作的结果,你需要在调用代码中使用await或使用.then()处理promise。
使用await允许您以更同步的方式处理异步操作的结果,从而使代码更易于阅读和理解。