承诺没有得到解决答案

【问题标题】：Promises not getting resolved承诺没有得到解决
【发布时间】：2022-01-16 11:18:03
【问题描述】：

我正在我的 React 应用程序中运行这个异步函数 -

const getMetaData = async (hashes: any) => {
    console.log({ hashes });
    try {
      const data = hashes.map(async (hash: any) => {
        const url = `http://localhost:3003/user/pinata/getmetadata/${hash}`;
        const metadata = await axios.get(url);
        return metadata.data.response;
      });
      console.log("data1", data);
      const metadata = await Promise.all(data);
      console.log('data2', metadata);
    } catch (error) {
      console.log('getMetaData Error', error);
    }
  };

console.log("data1", data) 给我-

data1 (12) [承诺，承诺，承诺，承诺，承诺，承诺，承诺，承诺，承诺，承诺，承诺，承诺]

这里的问题是在我执行await Promise.all(data) 之后，我在控制台的任何地方都没有得到data2。也许是因为 Promise 甚至没有得到解决？

知道可能出了什么问题吗？

提前致谢。

【问题讨论】：

嗯，我认为它是由const data = hashes.map(async (hash: any) => {引起的
有什么具体原因吗？不过我收到了data1。
改用await Promise.all(hashes.map(async (hash: any) => {
试过了，我也遇到了同样的问题
@John OP 已经使用了await Promise.all，他们只是在记录中间的承诺数组。

标签： javascript async-await promise

【解决方案1】：

您的代码在使用 SWAPI API 时似乎运行良好，因此您使用的 API 可能无法正确传递数据。我运行以下代码进行测试。这里有一个指向codebox 的链接，如果您愿意，可以随意使用它。

import axios from "axios";

const data = ["people", "planets", "starships"];

const getMetaData = async (hashes) => {
  console.log({ hashes });
  try {
    const data = hashes.map(async (hash) => {
      const url = `https://swapi.dev/api/${hash}`;
      const metadata = await axios.get(url);
      return metadata.data.results;
    });
    console.log("data1", data);
    const metadata = await Promise.all(data);
    console.log("data2", metadata);
  } catch (error) {
    console.log("getMetaData Error", error);
  }
};

getMetaData(data);

【讨论】：

【解决方案2】：

使用此代码，最有可能出现的情况是循环中的一个 Promise 没有解决或拒绝。为了确认这一点，您可以使用更多本地错误处理记录每个可能的路径，以便您可以准确查看每个请求发生了什么。我还在请求中添加了超时，因此您肯定可以确定它是否只是没有给出响应，但是您也可以通过查看循环中每个请求的开始和结束的日志记录来看到：

function delay(msg, t) {
    return new Promise((resolve, reject)) => {
        setTimeout(() => {
            reject(new Error(msg));
        }), t);
    });
}

const getMetaData = async (hashes: any) => {
    console.log({ hashes });
    try {
        const data = hashes.map(async (hash: any, index: number) => {
            try {
                console.log(`Request: ${index}, hash: ${hash}`);
                const url = `http://localhost:3003/user/pinata/getmetadata/${hash}`;
                const metadata = await axios.get(url);
                console.log(`Request: ${index}, result: ${metadata.data.response}`);
                return metadata.data.response;
            } catch (e) {
                console.log(`Request: ${index} error: `, e);
                throw e;
            }
        });
        console.log("data1", data);
        const metadata = await Promise.all(data.map((p: any, index: number) => {
            return Promise.race(p, delay(`Timeout on request #${index}`, 5000));
        });
        console.log('data2', metadata);
    } catch (error) {
        console.log('getMetaData Error', error);
    }
};

仅供参考，我真的不知道 Typescript 语法，所以如果我在这里犯了任何 Typescript 错误，希望你能看到大致的想法并修复语法。

【讨论】：