在节点js / javascript中的map函数之外获取异步等待数据

Question

let object = [{
  id: `01`, name: `fish`, type: `marine`,
}, {
  id: `02`, name: `fish`, type: `fresh`,
}, {
  id: `03`, name: `fish`, type: `tank`,
}, {
  id: `04`, name: `animal`, type: `pet`,
}, {
  id: `05`, name: `animal`, type: `wild`,
}, {
  id: `06`, name: `animal`, type: `zoo`,
}, {
  id: `07`, name: `food`, type: `veg`,
}, {
  id: `08`, name: `food`, type: `non-veg`,
}]

let data = []
object.map((value) => {
  data.push([value.name, value.type])
})

console.log(data)

在第一个示例中，我可以在 map 函数之外获取数据，但在第二个示例中，我无法获取数据

let object = [{
  id: `01`, name: `fish`, type: `marine`,
}, {
  id: `02`, name: `fish`, type: `fresh`,
}, {
  id: `03`, name: `fish`, type: `tank`,
}, {
  id: `04`, name: `animal`, type: `pet`,
}, {
  id: `05`, name: `animal`, type: `wild`,
}, {
  id: `06`, name: `animal`, type: `zoo`,
}, {
  id: `07`, name: `food`, type: `veg`,
}, {
  id: `08`, name: `food`, type: `non-veg`,
}]
    
let data=[];
let test;
object.map(async (value) => {
  test = await getValue(value.name);
  data.push([value.name,value.type,test]);            
})
console.log(data);

与第一个示例一样，我可以轻松地在第二个函数中获取地图函数之外的数据我得到空白数组如何获取地图函数之外的异步等待数据

• 我哪里做错了，我不明白

Answer 1

let object = [{
  id: `01`, name: `fish`, type: `marine`,
}, {
  id: `02`, name: `fish`, type: `fresh`,
}, {
  id: `03`, name: `fish`, type: `tank`,
}, {
  id: `04`, name: `animal`, type: `pet`,
}, {
  id: `05`, name: `animal`, type: `wild`,
}, {
  id: `06`, name: `animal`, type: `zoo`,
}, {
  id: `07`, name: `food`, type: `veg`,
}, {
  id: `08`, name: `food`, type: `non-veg`,
}]
    
async function demo(){
    
 let data=[];
 let test;

 for( const value of object){
   test = await getValue(value.name);
   data.push([value.name,value.type,test]);
 }

 console.log(data);
}

试试这个，我希望这会奏效，因为您必须在 for 循环中编写您的代码，您想要达到的效果会奏效

Answer 2

使用Promise.all:

const data = await Promise.all(object.map(async (value) => {
  const test = await getValue(value.name);
  return [value.name,value.type,test]
}))

console.log(data)

Answer 3

试试这个，你会很容易地得到你的响应 viva for 循环。 Map 函数使用一个回调函数，该回调函数在给定数组的每个元素上进行遍历。有关更多详细信息，请通过此async/await 了解 Array.map 功能，也可以使用 promise.all 与给定链接中帖子中提到的相同。

let object=
    [
     {
      id:`01`,
      name:`fish`,
      type:`marine`,
     },
     {
      id:`02`,
      name:`fish`,
      type:`fresh`,
     },
     {
      id:`03`,
      name:`fish`,
      type:`tank`,
     },
     {
      id:`04`,
      name:`animal`,
      type:`pet`,
     },
     {
      id:`05`,
      name:`animal`,
      type:`wild`,
     },
     {
      id:`06`,
      name:`animal`,
      type:`zoo`,
     },
     {
      id:`07`,
      name:`food`,
      type:`veg`,
     },
     {
      id:`08`,
      name:`food`,
      type:`non-veg`,
     }
    ]

    const getData = async function(){
      let data=[];
      for (var i=0; i<object.length; i++){
        let value = object[i];
        let test= await getValue(value.name);
        data.push([value.name,value.type,test]);  
      }
      return data;
    }

console.log(await getData());

Answer 4

请注意，map 函数会产生一个 Promise 对象作为每个项目的返回值。

data 完成收集所有数据的时刻应该在所有 Promise 完成之后。

因此，为确保过程完成，请在使用 data 之前使用 await Promise.all()。

let object = [{
  id: `01`, name: `fish`, type: `marine`,
}, {
  id: `02`, name: `fish`, type: `fresh`,
}, {
  id: `03`, name: `fish`, type: `tank`,
}, {
  id: `04`, name: `animal`, type: `pet`,
}, {
  id: `05`, name: `animal`, type: `wild`,
}, {
  id: `06`, name: `animal`, type: `zoo`,
}, {
  id: `07`, name: `food`, type: `veg`,
}, {
  id: `08`, name: `food`, type: `non-veg`,
}]

let data=[];
let test;
let promises = object.map(async (value) => {
  test = await getValue(value.name);
  data.push([value.name,value.type,test]);            
})

// 1. This line matters
await Promise.all(promises);
console.log(data);

// 2. Or if you cannot use await here
Promise.all(promises).then(() => {
  console.log(data);
});

顺便说一下，因为getValue函数是异步的，所以你可能会以完全随机的顺序获取数据，如果你关心顺序，你可能需要另一种方法。