Axios.get () внутри функции карты, чтобы получить данные для нескольких объектов, возвращающих объект обещания - PullRequest
Новая
       5

Axios.get () внутри функции карты, чтобы получить данные для нескольких объектов, возвращающих объект обещания

0 голосов
/ 02 февраля 2019

У меня возникла проблема с вызовом axios fetch внутри возвращаемого объекта из функции Array.map.Всякий раз, когда я возвращаю ответ, он возвращает объект обещания в массив с нужными мне данными, но я не могу разобрать объект обещания, чтобы получить необходимые данные из него.Когда я получаю ответ console.log, я получаю обычный объект, а не обещание.

Я пытался использовать Promise.all, используя redux-thunk для диспетчеризации (но это отправляет отдельное действие для каждого элемента массива),JSON.parse, JSON.stringify, однако я не могу заставить асинхронный запуск выполняться в массиве 

export const checkStreamerStatus = streamers => {
  return{
    type: CHECK_STREAMER_STATUS,
    payload: {
      streamers: streamers.map(streamer => ({
        ...streamer,
        status: getStatus(streamer)
      }))
    }
  }
}

const getStatus = streamer => {
  return axios.get(`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${streamer.social.youtube}&type=video&eventType=live&key=[API KEY]`)
    .then(res => res.data)
    .catch(err => err)    
}

Я ожидаю, что код выведет массив объектов с данными из вызова fetch какновый ключ в каждом объекте с именем «status», а затем я ожидаю обновить свое состояние в моем редукторе с помощью возвращенного массива.

1 Ответ

0 голосов
/ 02 февраля 2019

Что касается подхода

, но я не могу разобрать объект обещания

. Основная идея такова: Promise - это не анализ данных.Речь идет об ожидании, пока данные не поступят.

Это может быть сделано с async/await (и с использованием redux-thunk, поскольку мы не можем просто вернуть действие синхронно) 

export const checkStreamerStatus = (streamers) => async (dispatch) {
  dispatch({
    type: CHECK_STREAMER_STATUS,
    payload: {
      streamers: streamers.map(streamer => ({
        ...streamer,
        status: await getStatus(streamer)
      }))
    }
  });
}

Несовершенство - все, что будет вызвано getStatusпоследовательно.И любой следующий запрос будет ждать ответа предыдущего.Чтобы все запросы выполнялись параллельно, нам нужно создать N запросов, а затем ждать всех с помощью Promise.all: 

async function appendWithStatus(streamer) {
  return {
    ...streamer, 
    status: await getStatus(streamer);
  };
}

export const checkStreamerStatus = (streamers) => async (dispatch) => {
    const streamersWithStatus = await Promise.all(streamers.map(appendWithStatus));
    dispatch({
      type: CHECK_STREAMER_STATUS,
      payload: {
        streamers: streamersWithStatus,
      }
   });
}
...