异步函数在同步函数内返回答案

【问题标题】：Async function return inside synchronous function异步函数在同步函数内返回
【发布时间】：2021-02-23 13:41:26
【问题描述】：

我一直在阅读 this MDN 异步指南以更好地理解异步代码。就在我觉得我对异步代码/承诺有了更好的理解时，我在该指南中遇到了这个函数：

function fetchAndDecode(url, type) {
  return fetch(url).then(response => {
    if(!response.ok) {
      throw new Error('HTTP error! status: ${response.status}');
    } else {
      if(type === 'blob') {
        return response.blob();
      } else if(type === 'text') {
        return response.text();
      }
    }
  })
  .catch(e => {
    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
  });
}

我的第一个想法是不要挂断它并通过它来供电，但当然，它建立在指南后面的这个例子之上，所以我希望这里有人可以帮助我解决这个具体情况；在同步函数中运行的异步函数。

我 console.log()'d 输出，并且正在接收你所期望的，一个 Promise 对象。我可以看到，因为我们正在返回一个异步函数（fetch），它返回另一个 promise（.then），它返回另一个 promise（.blob（）或 .text（））。

我用谷歌搜索并环顾四周，但找不到向我解释这种特殊情况的问题。我希望有人能给我指出一个链接，或者彻底解释一下，这样我就不会觉得自己被困住了。

fetchAndDecode() 函数是否被推送到异步事件队列，并且仅在主线程可用时才运行？如果是这样，代码是如何知道这样做的？

为什么要将此异步代码包装在同步声明中？为什么要包装它？

声明会更正确吗

async function fetchAndDecode(url, type) {

    return await fetch(url).then( /* etc... */ )}

感谢您的帮助。

约旦

【问题讨论】：

fetch 返回一个承诺。承诺可以是awaited。 fetchAndDecode 返回 fetch 的返回值，一个承诺。 await fetch 和 await fetchAndDecode 之间没有太大区别。如果你没有在fetchAndDecode 中使用fetch 的返回值，那么做async fetchAndDecode() { return await fetch... } 有点多余。
"在同步函数中运行的异步函数。" - 如果你的意思是一个没有用 async 关键字标记的函数，那很正常，甚至是默认值。这是一个返回承诺的异步函数。使用async/await 只不过是语法糖。
async method() { return await <promise>; } 看起来像一个广义的反模式。您正在让一个方法返回一个承诺，该承诺被解析为另一个承诺的结果。不使方法成为async 并使方法返回内部承诺，将获得相同的结果，而无需额外的承诺
在页面的下方，它说：“函数体内的代码是异步的并且是基于 Promise 的，因此实际上，整个函数就像 Promise 一样——方便。”我在最初的通读中一定错过了这一点。感谢大家的帮助。

标签： javascript function asynchronous

【解决方案1】：

fetchAndDecode() 函数是否被推送到异步偶数队列

没有。是同步的。它只是调用一个触发异步事件的函数 (fetch)。

为什么要将此异步代码包装在同步声明中？为什么要包装它？

它需要两个参数。它允许您在这些参数发生更改时重用该函数，而无需复制整个主体。

声明会更正确吗

不，这只是更冗长。

await 非常有用，当您想暂停一个函数直到一个 Promise 解决，然后用解决的值在该函数内做一些事情。

你没有这样做。你才刚回来。

“返回从 fetch 返回的承诺”比“创建一个新的承诺（并返回它）要简单得多。等待从 fetch 返回的承诺解决，获取它的值，然后用该值解决第一个承诺。 "

【讨论】：