将 Promise 结果拉出嵌套地图反应 js

Question

我在 React 应用程序中工作，我需要在包含具有以下结构的对象的数组中循环：

const servers = [
  {
    name: "Server A",
    url: "https://server-one.com/version",
    accessToken: "yJ0eXAiOiJKV1QiLCyJ0eXAiOiJKV1QiLCyJ0eXAiOiJKV1QiLC",
    subVersions: [
      {
        name: "Subversion A1",
        ip: "https://10.4.20/version",
        accessToken: "yJ0eXAiOiJKV1QiLCyJ0eXAiOiJKV1QiLCyJ0eXAiOiJKV1QiLC"
      },
      {
        name: "Subversion A2",
        ip: "https://10.4.20/v1/version",
        accessToken: "yJ0eXAiOiJKV1QiLCyJ0eXAiOiJKV1QiLCyJ0eXAiOiJKV1QiLC"
      }
                 ]
  },
  // ... more servers obj with the same structure
]

我需要通过 api 调用 url（或 ip）和 return 对象数组来获取有关服务器版本的信息这个：

[
  {
    name: "Server A",
    version: "1.0.1",
    subVersions: [
      {
        name: "Subversion A1",
        version: "1.0.0"
      },
      {
        name: "Subversion A2",
        version: "1.0.0"
      },
            ]
   }  
]

我正在做的是：fetch() 方法将调用 fetchVersion()（return 是主服务器版本），然后它在所有子版本中映射到把它们也拿来。

我正在努力从下面看到的嵌套映射中获取子版本的 result.data。

我试过：

return每次迭代的数据
将数据推送到数组中并尝试在迭代结束时return它
returning 数据数组或returning 解析数据数组的新 Promise

但是什么也没有。我可以在最嵌套的地图上看到正确的数据，但在外面我要么得到 Promise { <pending> } 数组或空数组。

对不起，如果代码看起来很乱，我希望它有意义。

const fetchVersion = server =>
  axios
    .get(server.url, {
      headers: {
        Authorization: `Bearer ${server.accessToken}`,
        "Content-Type": "application/json"
      },
      timeout: 30000
    })
    .then(result => new Promise(resolve => resolve(result.data)));

const fetchSubVersion = subVersion =>
  axios
    .get(subVersion.ip, {
      headers: {
        Authorization: `Bearer ${subVersion.accessToken}`,
        "Content-Type": "application/json"
      },
      timeout: 30000
    })
    .then(result => new Promise(resolve => resolve(result.data)));

Class Servers {
  constructor(servers = []) {
    this.servers = servers ;
  }

fetch() {
// ==== this map below is the problematic part =====

const subVersions = this.servers.map(server => {
      var subVersArr = server.subVersions.map(
        async server.subVersions.map(subVersion => 
          await fetchSubVersions(subVersion)
            .catch(() => ({ data: {} }))
            .then(result => new Promise(resolve => resolve(result.data)));
            });
        })
    );
    
    return Promise.all(subVersArr)
        .catch(() => ({ data: {} }))
        .then(data => {
          console.log("data", data); // <- I see the data here correctly
          return data;
        });
    };
// ======= till here ============


const fetches = this.servers.map(server =>
    fetchVersion(server)
        .catch(() => ({ data: {} }))
        .then(result => {
       console.log("subVersions", subVersions(server)); <- but not here
     return {
          name: server.name,
          versions: result.data,
          subVersions: subVersions(server), // should contain the result of the 
                                              problematic map above
          }
        }))
    );

    return Promise.all(fetches);
  }

感谢帮助！！

Answer 1

你如何调用你的获取函数？无论你在哪里调用它，你都应该等待它。

像这样：

async dummyFunction() {
   await fetch();
}

Answer 2

我终于明白了。我不清楚的是 then() returns 本身就是一个承诺，所以我只需要做 subVersion: await subVersions(server) 并且数据就在那里。

将 Promise 结果拉出嵌套地图反应 js

pull Promise result outside of a nested map react js

nested

async-await

es6-promise