如何从 async.map() function 返回数据？

Question

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

这是我的代码。

  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());

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

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

或者，简单地添加一个 return 语句

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());

Answer 2

正如帕特里克罗伯特在他的评论中指出的那样，你需要添加一个回报。 如果你得到一个充满 Promises 的数组，使用 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 元素。

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