pull Promise result outside of a nested map react js - async-await

Question

I'm working at a React app and I need to loop inside an array containing objects with this structure:
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
]
and I need to fetch information about the server versions via api calls to the url (or ip) and return an array of objects that looks like this:
[
{
name: "Server A",
version: "1.0.1",
subVersions: [
{
name: "Subversion A1",
version: "1.0.0"
},
{
name: "Subversion A2",
version: "1.0.0"
},
]
}
]
I'm doing is the following: the fetch() method will call fetchVersion() (which returns the main server version), and then it maps inside all the subVersions to fetch them too.
I'm struggling to get the result.data of the subVersions fetch out of that nested map you can see below.
I've tried to:
return the data at every iteration
pushing the data inside an array and try to return it at the end of the iterations
returning the array of data or returning a new Promise that resolves the array of data
But nothing. I can see the right data at the most nested map, but outside I either get a
Promise { <pending> } array or an empty one.
Sorry if the code looks messy, I hope it makes sense.
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);
}
Thanks for the help!!

Answer 1

How are you calling your fetch function? You should await it wherever you are calling it.
Like this:
async dummyFunction() {
await fetch();
}

Answer 2

I finally figured it out. What I didn't have clear is that then() returns a promise itself, so all I had to just do subVersion: await subVersions(server) and the data is there.