javascript - 在带有扩展的 map 中使用 Promise

Question

我正在尝试映射一个数组，并且想使用扩展语法向该数组添加一个字段。我想为每个元素使用的数据来自 api 调用。我正在努力获得值(value)观而不是 promise 。

这就是我现在得到的:

​
distance: Promise { <state>: "fulfilled", <value>: (1) […] }

id: "1234"

应该是:

distance: 5

id: "1234"

这是我正在使用的代码:

let stations = nearestStations.map(station => ({
  ...station,
  distance: getDistance([userLocation[0], userLocation[1]], [station.lat,station.lon]).then(_=>_)
}))
console.log(stations)

Answer 1

使用Promise.all等待每个Station promise 解析:

const userLatLon = [userLocation[0], userLocation[1]];
const stationProms = nearestStations.map(
  // use Promise.all here so that the station can be passed along with its `distance` promise
  station => (Promise.all([station, getDistance(userLatLon, [station.lat,station.lon])]))
);
Promise.all(stationProms).then((stationItems) => {
  const stations = stationItems.map(([station, distance]) => ({ ...station, distance }));
  console.log(stations)
});

内部的Promise.all不是必需的，但它有助于限制范围 - 同样，您可以这样做:

const userLatLon = [userLocation[0], userLocation[1]];
const stationProms = nearestStations.map(station => getDistance(userLatLon, [station.lat,station.lon]));
Promise.all(stationProms).then((stationItems) => {
  const stations = stationItems.map((distance, i) => ({ ...nearestStations[i], distance }));
  console.log(stations)
});

感谢@jonrsharpe，一种更好看的方法只需将 .then 链接到 getDistance promise 上:

const userLatLon = [userLocation[0], userLocation[1]];
const stationProms = nearestStations.map(
  station => getDistance(userLatLon, [station.lat,station.lon])
    .then(distance => ({ ...station, distance }))
);
Promise.all(stationProms).then(console.log);