0

Здравствуйте, я хочу сделать запрос в запросе. Сначала делаю запрос, получаю от сервера данные, в них имеется адрес в формате долгота/широта, мне нужно из координат получить нормальный адрес. Для этого после получения данных из первого запроса(массив из ~100 объектов) я запускаю метод forEach и делаю запрос на geocode-maps.yandex.ru

export const getProducts = () => async dispatch => {
  dispatch({
    type: GET_PRODUCTS_REQUEST
  });

  try {
    await fetch(API_SERVER_PRODUCTS)
      .then(response => {
        if (response.ok) {
          return response.json()
            .then(products => {
              return products
            })
            .then(async products => {
              const addressArray = [];

              products.data.forEach(item => {
                let lngLatUrl = YANDEX_GEOCODE + 'E' + item.address.lng + ',N' + item.address.lat;

                try {
                  fetch(lngLatUrl)
                    .then(r => {
                      if (r.ok) {
                        return r.json()
                          .then(async address => {
                            addressArray.push(address.response.GeoObjectCollection.featureMember[0].GeoObject.metaDataProperty.GeocoderMetaData.text);
                          })
                      } else {
                        throw new Error('Network response was not ok.(2)');
                      }
                    })
                } catch (err) {
                  console.log('some error with address: ' + err)
                }
              });

              await dispatch({
                type: GET_PRODUCTS_SUCCESS,
                payload: products.data,
                newAddress: addressArray
              })

            })
        } else {
          throw new Error('Network response was not ok.');
        }
      });
  } catch (err) {
    dispatch({
      type: GET_PRODUCTS_FAILURE,
      error: true,
      errorMassage: err
    })
  }
};

Не могу понять, что у меня с адресами получается. Данные из консоли

Возможно я не правильно записываю эти строки с адресами в массив... Потому, что я получаю адреса с яндекса, пушу их в массив пустой - если вывести его в консоль, то он заполненный, но его длина равна 0, не понимаю как это возможно.

В консоле logger показывает, что у меня есть массив с адресами, в консоле вижу, что там 100 строк, но если пишу nameArr.length, то получаю 0 и никак не могу обратиться к элементам по индексу. В redux-devtools-extension вообще показывает, что массив приходит пустой. Мне кажется, что нужно использовать async/await. Но понять не могу как. И вообще не слишком ли мудреный запрос получается? Может можно сделать как-то элегантнее?
Помогите, пожалуйста, мучаюсь уже второй день, думал простая задачка...


UPDATE Пришел к такому решению.. Надеюсь оно верное

               fetch(lngLatUrl)
                .then(r => {
                  if (r.ok) {
                    return r.json()
                      .then(async address => {
                        newProducts[i].addressString = address.response.GeoObjectCollection.featureMember[0].GeoObject.metaDataProperty.GeocoderMetaData.text;

                        if (arr.length === i + 1) {
                          dispatch({
                            type: GET_PRODUCTS_SUCCESS,
                            payload: newProducts
                          })
                        }
                      });
                  } else {
                    throw new Error('Network response was not ok.(2)');
                  }
                })
5
  • 1
    Я в реакте не очень разбираюсь, но вижу, что dispatch GET_PRODUCTS_SUCCESS вы вызываете с пустым массивом. Попробуйте перенести его вызов в место, где вы заполняете массив. 23 мар 2018 в 4:43
  • @StepanKasyanenko да, вы правы, если перенести dispatch в функцию, где я пушу строки в массив, то данные доходят. Но получается, что у меня dispatch срабатывает 100 раз, а мне нужно, чтобы я заполнил массив строками с адресами и один раз вызвал функцию dispatch. Как это можно сделать? 23 мар 2018 в 10:17
  • Сделал проверку, чтобы после получения последнего адреса вызывать dispatch и получать один массив. Такое решение приемлемо? 23 мар 2018 в 21:54
  • Зачем вы смешиваете await и then в одном и том же методе? Почему вы не можете написать просто const productsResp = await fetch(API_SERVER_PRODUCTS); const products = await productsResp.json()? 26 мар 2018 в 7:06
  • @PavelMayorov, к сожалению, я пока слаб в js. Вставил async/await для теста, потом и забыл про них. Сейчас убрал их, у меня все работает, получается они в данном примере и не нужны.. Если это не так, то был бы рад, если бы вы меня поправили. 26 мар 2018 в 18:44

1 ответ 1

2

Ваше решение работать будет и будет работать верно.

Посмотрите еще один способ, как можно сделать, через Promise.all.

export const getProducts = () => async dispatch => {
    dispatch({
        type: GET_PRODUCTS_REQUEST
    });

    try {
        await fetch(API_SERVER_PRODUCTS)
            .then(response => {
                if (response.ok) {
                    return response.json()
                        .then(products => {
                            return products
                        })
                        .then(async products => {
                            const addressArray = [];
                            // создаем массив промисов.
                            const promisesAddress = products.data.map(item => {
                                let lngLatUrl = YANDEX_GEOCODE + 'E' + item.address.lng + ',N' + item.address.lat;

                                try {
                                    // Возращаем промис
                                    return fetch(lngLatUrl)
                                        .then(r => {
                                            if (r.ok) {
                                                return r.json()
                                                    .then(async address => {
                                                        addressArray.push(address.response.GeoObjectCollection.featureMember[0].GeoObject.metaDataProperty.GeocoderMetaData.text);
                                                    })
                                            } else {
                                                throw new Error('Network response was not ok.(2)');
                                            }
                                        })
                                } catch (err) {
                                    console.log('some error with address: ' + err);
                                    return Promise.reject(err);
                                }
                            });
                            // Делаем обработку для всех запросов
                            Promise.all(promisesAddress)
                                .then(() => { // все адреса успешно получены
                                    await dispatch({
                                        type: GET_PRODUCTS_SUCCESS,
                                        payload: products.data,
                                        newAddress: addressArray
                                    });
                                })
                                .catch((e) => {
                                    // тут добавьте логику, если не получилось получить хотя бы один адрес
                                });
                        })
                } else {
                    throw new Error('Network response was not ok.');
                }
            });
    } catch (err) {
        dispatch({
            type: GET_PRODUCTS_FAILURE,
            error: true,
            errorMassage: err
        })
    }
};
4
  • Зачем вы тоже смешиваете await и then в одном и том же методе? Почему вы не можете написать просто const productsResp = await fetch(API_SERVER_PRODUCTS); const products = await productsResp.json()? 26 мар 2018 в 7:06
  • @PavelMayorov потому что я старался по минимуму изменить оригинальный код, что бы было понятно. 26 мар 2018 в 10:51
  • Спасибо за пример! Вы как раз описали то, где у меня была проблема - я не мог понять как поймать ошибку, если не приходили адреса. Когда писал код, то понял что мне нужен Promise, читал про промисы на learn.javascript и на MDN, но к сожалению совершенно не понял как реализовать свой пример с ними. Не могли бы вы рассказать немного подробнее про Promise, пожалуйста, если не затруднит. Та же проблема с async/await, навставлял их в качестве теста и забыл, но они тут похоже совсем не нужны? По крайней мере и без них все отлично работает.. 26 мар 2018 в 18:39
  • @nazarukroman к сожалению, рассказывать не могу, формат сайта не распологает к этому. Могу посоветовать еще раз почитать на learn.javascrip. Может и не один раз почитать)) 27 мар 2018 в 4:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.