ES8 使用带有 async 和 await 的箭头函数

Posted 2023-02-27

【中文标题】ES8 使用带有 async 和 await 的箭头函数

【英文标题】：ES8 using arrow function with async and await

【发布时间】：2018-01-31 15:36:59

【问题描述】：

我目前正在学习如何使用 ES8 的 fetch、async 和 await 我目前有这段代码可以工作：

const url = "https://api.icndb.com/jokes/random";

async function tellJoke() 
  let data = await (await fetch(url)).json();
  return data.value.joke;


tellJoke().then(data => console.log(data));

控制台：

"Chuck Norris can dereference NULL."

但是我发现了一个使用箭头函数的 sn-p，问题是我不知道如何返回我在当前示例中的值。

片段：

const fetchAsync = async () => 
await (await fetch(url)).json()

如果这不是最佳做法，请告诉我，也欢迎进一步阅读。

【问题讨论】：

最佳实践是仅在需要时使用箭头函数。只需使用您的工作代码即可:-)

顺便说一句，async/await 是 ES8 而不是 ES7 的一部分

@Bergi 是真的，忘记检查 MDN 和我发现的每个示例都提到了 ES7。

【参考方案1】：

在函数中使用 as same。如果您的代码中没有正文表达式（没有 ），它将返回语句的结果。在这种情况下，await (await fetch(url)).json().value.joke 的结果。

const fetchAsync = async () => (await (await fetch(url)).json()).value.joke;

或多行正文。使用主体表达式，您需要像在简单函数中一样显式返回。

const fetchAsync = async () => 
   const result = await fetch(url);
   const data = await result.json();
   return data.value.joke;

【讨论】：

.json().value.joke ... 我想你需要一些 () (await (await fetch(url)).json()).value.joke;

我展示的地方 - 我认为 ...我应该在说话之前检查一下：p

是的，你的代码是错误的，因为它会尝试访问 json().value.joke ...但是 json() 返回一个没有 value 属性的承诺，它肯定不会无论如何都不是 json 的值

知道了。谢谢。

【参考方案2】：

你可以再次使用你用来缩短通常的方法

async function tellJoke() 
  let response = await fetch(url);
  let data = await response.json();
  return data.value.joke;

到您的实施。作为单行，它可能看起来像这样：

const tellJoke = async () => (await (await fetch(url)).json()).value.joke;

【讨论】：

好的，我现在明白了，顺便说一句，我想let data = await response.json().value.joke; return data; 看起来比let data = await response.json(); return data.value.joke; 更好我能知道您对此的看法吗？

我个人的意见是不要仅仅为了返回它而引入另一个变量 - 来自名为 tellJoke 的函数的 return 已经足够描述了。无论如何，您的第一个 sn-p 不起作用，您需要在 await 表达式周围加上括号。