Question

我有一个ActionCreator，可以为每个place_id拨打Google地方信息。然后我想将响应推送到一个数组中，然后我将其传递给我的reducer。问题是我在它有机会被填满之前调度阵列。我该如何解决这个问题？

export function placesFetchBookmarks(place_ids) {
  return (dispatch) => {
    const newPlaces = [];
    place_ids.forEach(place_id => {
      const request = { placeId: place_id };
      const service = new google.maps.places.PlacesService(document.createElement('div'));
      service.getDetails(request, (place, status) => {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          newPlaces.push(place);
        } else {
          dispatch(placeDetailsHasErrored(true));
        }
      });
    });
    dispatch({
      type: PLACES_FETCH_DATA_SUCCESS,
      places: newPlaces
    })
  }
}

Answer 1

使用Promise.all并让异步调用解析promises。这样的事情应该有效：

const promises = place_ids.map(place_id => {
    return new Promise((resolve, reject) => {
        const request = { placeId: place_id };
        const service = new google.maps.places.PlacesService(document.createElement('div'));
        service.getDetails(request, (place, status) => {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                resolve(place);
            } else {
                reject();
            }
        });
    });
});

Promise.all(promises)
    .then(places => dispatch({
      type: PLACES_FETCH_DATA_SUCCESS,
      places
    }))
    .catch(() => dispatch(placeDetailsHasErrored(true)))

在将操作传递给reducers之前，如何确保返回所有调用并将其推送到数组中？

1 个答案: