javascript 这两种方法在等待模式中的区别是什么?

w1e3prcc  于 12个月前  发布在  Java
关注(0)|答案(3)|浏览(113)

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'关键字?
这些案子都是一样的

a64a0gku

a64a0gku1#

一个pixelc函数返回一个promise。但是如果一个promise从它返回,那么就不需要async,因为一个promise无论如何都会返回。
出于同样的原因,你永远不应该执行return await,因为你延迟了当前流的执行,而不是立即返回。基本上,在这种情况下,你无论如何都会返回一个promise,但带有已解析的值。返回值甚至可以被调用者丢弃,所以如果你执行return await,它甚至可能会影响性能。永远不要执行return await。情况B是正确的,但应该通过删除来修复。return await

export async function fetchData(endpoint) {
  const response = await fetch(`${BASE_URL}/sample/${endpoint}`);
  if (!response.ok) {
    throw new Error("Fail");
  }
  return response.json();
} 

export function getFolders() {
  return fetchData('folder');
}

export function getUserProfile() {
  return fetchData('user');
}

字符串

vbkedwbf

vbkedwbf2#

在这两种情况下,代码的工作原理是一样的,但是有一点需要注意,标记一个函数async可以保证这个函数是一个Promise,在你的代码中,这不太可能是一个问题,除非你拼错了fetchData,调用者使用的是then/catch等。
eg.

async function test1() {
  return fetchDataOops();
}

function test2() {
  return fetchDataOops();
}

function handleError(name) {
  return e => {
    console.log(`Handled error for ${name} and it was ${e.toString()}`);
  }
}

test1().catch(handleError('test1'));
test2().catch(handleError('test2'));

字符串
请注意,在test2中,错误是如何被处理的。如果纯粹使用async/await,这种差异并不重要,因为try / catch逻辑可以处理这两种情况。
因此,在某些方面,case A可以为您提供一点额外的代码安全性,特别是如果函数混合了asyncsync,并且您还使用了.then, .catch处理程序。
这样做会对性能造成一个小的影响,当我说小的时候,我的意思是小,(但在紧循环中肯定会累加起来)基本上,在您的示例中创建了一个额外的Promise,它返回一个Promise。您也可以说注解中提到的case - A也提供了有关Intent的更多细节,IOW:在案例B中,除非您阅读程式码并知道fetchData也是Promise,但在Case A中,它会传回Promise,否则没有任何迹象显示此函数会传回Promise。

mrphzbgm

mrphzbgm3#

在第一种情况下(getData或getUserProfile),await关键字确保函数在继续之前等待fetchData promise被解析。
在第二种情况下,函数立即返回未解析的promise。如果你想处理fetchData操作的结果,你需要在调用代码中使用await或使用.then()处理promise。
使用await允许您以更同步的方式处理异步操作的结果,从而使代码更易于阅读和理解。

相关问题