如何从异步 .map() 函数返回数据？答案

【问题标题】：How to return data from an async .map() function?如何从异步 .map() 函数返回数据？
【发布时间】：2020-12-08 07:21:01
【问题描述】：

我希望从异步 .map() 函数中返回一些数据。它是异步的，因为 axios 调用在其中返回一些数据。我正在尝试通过files.kitchen 内部的array [] 进行.map()，然后调用axios 以获取files.kitchen 内部每个图像URL 的base64。由于我的函数的异步行为，我尝试使用 await 记录数据。 await 每次都返回undefined。我知道我使用等待是正确的。但是，我可能会遇到语法错误。我已经研究了这里的每个相关问题，但没有一个对我有用。

这是我的代码。

  const getbase64Data = () => {
    files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
  };
  console.log(await getbase64Data());

如果我需要分享其他内容，请告诉我。

【问题讨论】：

您的getbase64Data() 函数中没有return。

标签： javascript node.js asynchronous

【解决方案1】：

发件人：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

箭头函数可以有“简洁体”或通常的“块体”。

在简洁的正文中，只指定了一个表达式，它成为隐式返回值。在块体中，必须使用显式的 return 语句。

在您的代码中：

const getbase64Data = () => {
    files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
  };
  console.log(await getbase64Data());

getBase64Data 有一个块体...要使用隐式返回，您需要删除外部大括号...

const getbase64Data = () => 
    files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
  console.log(getbase64Data());

或者，只需添加一个返回语句

const getbase64Data = () => {
    var returnArray = files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
    return returnArray;
  };
  console.log(getbase64Data());

【讨论】：

你是对的，还有等离子鸡。隐含的回报帮助了我。这样做的回报是一组 Promise。然后我使用了Promise.all()
确保将此答案标记为已接受答案，以便问题显示为已解决，谢谢！

【解决方案2】：

正如 Patrick Robert 在评论中指出的那样，您需要添加退货。如果你得到一个充满 Promise 的数组，请使用 Promise.all

我经常使用这样的东西：

const fetched = await Promise.all(kitchen.map(async (image, index) => {
            return axios.get(image, {
            responseType: "arraybuffer",
          });
}))
fetched.map(x => { /* do stuff with fetched stuff here */ })

Promise.all 等待数组中的每个 Promise 元素。

【讨论】：

我能够很好地使用 Promise.all 以及 DynasticSponge 对隐式返回的回答。干杯

【解决方案3】：

你可以这样做：

const getbase64Data = () => {
  if (files.kitchen) {
    return Promise.all(files.kitchen.map(async (image, index) => { //Promise.all ensures all the async code gets executed
      const response = await axios.get(image, {
         responseType: "arraybuffer",
      });
        const buffer = Buffer.from(response.data, "binary").toString(
          "base64"
        );
        const data =
          "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
     }));
  }
  return null;
};
console.log(await getbase64Data());

【讨论】：