将.map转换为数组

Question

我需要将该响应转换为单个数组我使用了concatjavascript的功能，但它没有为我工作

我有一个id数组:

//Arreglo de ID's
const arrayIdImage = data.value.map((item, index) => {
const id = JSON.parse(item.Image);
return id
});

数组图像

我在get请求中使用这些id，像这样

arrayIdImage.map(async function(item) {
const optionsImage = {
method: 'GET',
url: `/items/${item}/thumbnails`,
headers: {
'Authorization': `Bearer ${tokenJson}`
}
}
await axios.request(optionsImage).then(function(response) {
console.log(response.data)
setUrlGetImage(response.data)
})
})

得到的响应如下:每个id请求的数组

响应图像

Answer 1

您的方法是正确的，但是如果您想要一个值数组，那么您调用.map()的函数需要返回一个值，而不是简单地调用它的另一个方法。这将是一个承诺的形式，而不是值本身，这意味着你将有一个承诺数组，每个承诺包含一个图像。

const thumbnailPromises = arrayIdImage.map(async function(item) {
const optionsImage = {
method: 'GET',
url: `/items/${item}/thumbnails`,
headers: {
'Authorization': `Bearer ${tokenJson}`
}
}
return axios.request(optionsImage).then(function(response) {
return response.data
})
})
const thumbnails = await Promise.all(thumbnailPromises)

您可以阅读更多关于Promise.all()和Promise.allSettled()的信息，以了解更多关于这是如何工作的想法，但重要的是您一次性发送所有数据请求(在.map()中)，然后等待它们全部完成，而不是发送一个，等待回复，然后发送下一个，等等。

Answer 2

您可以使用Promise.all()并行发送所有请求并等待它们全部完成。(这是更快)

const requests = arrayIdImage.map((item) => {
const optionsImage = {
method: 'GET',
url: `/items/${item}/thumbnails`,
headers: {
Authorization: `Bearer ${tokenJson}`,
},
}
return axios.request(optionsImage);
});
const results = await Promise.all(requests);
const data = results.map((result) => result.data);

可以通过foreEach函数在id上迭代arrayIdImage。在forEach函数中，您可以通过id获取数据，并将响应推入数组，如下所示:

const data = []
arrayIdImage.forEach(async (item) => {
const optionsImage = {
method: 'GET',
url: `/items/${item}/thumbnails`,
headers: {
Authorization: `Bearer ${tokenJson}`,
},
}
const res = await axios.request(optionsImage)
data.push(res.data)
})