Promise.all зависает. Не выдает ни ошибку, ни результат. В чем проблема?

Question

[Skelman]

Есть код:

const scrapTitleAndRatings = async () => {
  const html = await request.get(
    "https://www.imdb.com/chart/moviemeter?ref_=nv_mv_mpm"
  );
  const $ = await cheerio.load(html);

  const movies = $("tr")
    .map((i, element) => {
      const title = $(element)
        .find("td.titleColumn > a")
        .text();
      const urlDescription = `https://www.imdb.com${$(element)
        .find("td.titleColumn > a")
        .attr("href")}`;
      const rating = $(element)
        .find("td.ratingColumn.imdbRating > strong")
        .text();
      return { title, rating, rank: i, urlDescription };
    })
    .get();
  return movies.filter(m => m.title);
};

const getPosterImageUrl = async movies => {
  for (let i = 0; i < movies.length; i++) {
    try {
      const posterImageUrel = await nightmare
        .goto(movies[i].posterUrl)
        .evaluate(() =>
          $(
            "#photo-container > div > div:nth-child(3) > div > div.pswp__scroll-wrap > div.pswp__container > div:nth-child(2) > div > img:nth-child(2)"
          ).attr("src")
        );
      movies[i].posterImageUrel = posterImageUrel;
      savePostersToDisk(movies[i]);
    } catch (error) {
      console.log(error);
    }
  }
  return movies;
};

const getPostUrl = async movie => {
  try {
    const html = await request.get(movie.urlDescription);
    const $ = await cheerio.load(html);
    movie.posterUrl = "https://www.imdb.com" + $("div.poster > a").attr("href");
    return movie;
  } catch (error) {
    console.log(error);
  }
};

const scrapPosterUrl = async movies => {
  try {
    const promisemovies = movies.map(async movie => getPostUrl(movie));
    const moviesPostersUrl = await Promise.all(promisemovies);
    return moviesPostersUrl;
  } catch (error) {
    console.log(error);
  }
};

async function main() {
  try {
    let movies = await scrapTitleAndRatings();
    movies = await scrapPosterUrl(movies);
    console.log(movies);
    // movies = await getPosterImageUrl(movies);
    // console.log(movies);
  } catch (error) {
    console.log(error);
  }
}

Проблема в функции scrapPosterUrl, которая не может вернуть все промисы. При чем, если я запускаю код на мобильном интернете, то все возвращается. Может кто-то подсказать, почему так происходит? И как пофиксить эту проблему?

Comments

[Mikhail Osher]

Можно codesandbox демку?

[Skelman]

Mikhail Osher, https://codesandbox.io/s/summer-mountain-rkh1u

Answer 1

[Сергей Мелодин]

Точно по причинам не скажу, но так не делают:

const promisemovies = movies.map(async movie => getPostUrl(movie));
const moviesPostersUrl = await Promise.all(promisemovies);

потому что map по умолчанию не поддерживает асинхронность

Вполне возможно, что оттуда растут ноги проблемы. Собственно, нужно просто вернуть массив запросов:

const moviesPostersUrl = await Promise.all(movies.map(movie => getPostUrl(movie)));

В целом, коду требуется рефакторинг, ибо смешалось всё - вёрстка, логика, кони, люди. Проблема с поиском проблемы идёт отсюда.

Comments

[Skelman]

Собственно этот код

const promisemovies = movies.map(async movie => getPostUrl(movie));

тоже вернет массив запросов, так как нет await. Без await функция же не будет асинхронной.
Вопрос в другом. Почему на более медленном мобильном интернете все отрабатывается, а на более скоростном - промис зависает? Может быть причина в том, что из-за очень быстрых и частых запросах, блокируется мой айпи?

[profesor08]

А причем тут map и асинхронность? Она не в асинхронном контексте. Каждый элемент массива будет заменен на результат выполнения функции. Если она асинхронная, то каждый элемент будет промисом, и разрешится когда-то там. Функция map свое дело сделала и ей пофигу на все остальное.

[Сергей Мелодин]

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

Потом покрыть код логами, подключить телефон к компу и смотреть где различия через консоль браузера (https://developers.google.com/web/tools/chrome-dev...

[Сергей Мелодин]

profesor08, потому что в таком виде map просто заблокирует поток пока не соберёт в себе все необходимые промисы. Зачем писать асинхронный код, если в нём юзаются синхронные функции? )

[Skelman]

Сергей Мелодин, такой вариант

const moviesPostersUrl = await Promise.all(movies.map(movie => getPostUrl(movie)));

тоже зависает и ничего не возвращает. Здесь проблема не в асинхронности, а в том, что по ходу нет ответа от imdb.
Я протестил последовательные запросы на него

const getPosterUrl2 = async movies => {
  for (let i = 0; i < movies.length; i++) {
    try {
      const html = await request.get(movies[i].urlDescription);
      const $ = await cheerio.load(html);
      movies[i].posterUrl =
        "https://www.imdb.com" + $("div.poster > a").attr("href");
      console.log(movies[i]);
    } catch (error) {
      console.log(error);
    }
  }
  return movies;
};

С таким подходом все возвращается успешно. По ходу вся беда именно в работе imdb

[Kovalsky]

Сергей Мелодин, ты просто оптимизировал выражение, не более. Чисто концептуально между твоим вариантом и исходным разницы нет никакой. А тред заблокируется в любом случае.

Skelman, попробуй поставить задержку между запросами. Я уверен такой известный сервис как imdb защищает себя от парсинга. С этой точки зрения, кстати, запросы лучше гонять последовательно

[profesor08]

Сергей Мелодин, не заблокирует, так как он вне асинхронного контекста и все асинхронные вызовы в колбеке это лишь промисы, которые помещаются в ячейки и ждут своей участи.

function a() {
   return new Promise(r => setTimeout(() => {console.log(1)}, 2000))
}

[1,2,3,4,5].map(async () => await a());

console.log(2);

// вывод будет
2

// спустя 2 сек
1
1
1
1
1

[Сергей Мелодин]

profesor08, хм, да, похоже на то. Странно, я где-то сталкивался с обратным поведением, возможно, зависит от версии ноды или я что-то упускаю.

В любом случае я продолжаю настаивать что рефакторинг этому коду принесёт ясности с сутью проблемы :)

[profesor08]

я что-то упускаю

оно самое, поведение .map, .forEach и тд, отличается от поведения for(..)

[Skelman]

Сергей Мелодин, если не сложно, как должен правильно должен выглядеть код)

[Сергей Мелодин]

Skelman, если для запросов используется axios, то создать axios instance и спрятать все запросы по сети туда. Работу с dom тоже вынести в отдельный модуль. Не юзать глобальные переменные, не мутировать объекты, сократить try catch до одного на верхнем уровне приложения. Надо чтобы остались данные на входе, данные на выходе + написать тесты на всё это.