ES8 使用带有异步和等待的箭头函数

Question

我目前正在学习如何使用 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."

但我发现了一个使用箭头函数的代码片段，问题是我不知道如何 return 我在当前示例中使用的方式来计算我的值。

片段：

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

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

Answer 1

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

的结果

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

或多行正文。对于正文表达式 {}，您需要像在简单函数中那样显式 return。

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

Answer 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;

ES8 使用带有异步和等待的箭头函数

ES8 using arrow function with async and await

javascript

async-await

fetch-api

arrow-functions

ecmascript-2017