ファイルを読み込んだ順番に出力されません。

Question

スクレイピングのプログラムなのですが、読み込んだ順に表示がされません。
配列urlsに登録してあるページ順に、出力したいと思っています。
どのようにプログラムを直せば良いのでしょうか？

Node.jsは、シングルスレッドの非同期だということは、聞きかじった程度には知っています。
あまり大量にスクレイピングするのは良くないと怒られてしまう可能性もあるので
ここでは、実際のスクレイピング対象のURLではないもので、質問をさせて頂きます。
実際のプログラムは、GitHubにあげておきます。
疑問が解消された後に、GitHubはプライベートにしておきます。

どのように修正をすれば、読み込んだ順番どおりに、出力されるのでしょうか？

'use strict';
const rpn = require('request-promise-native');
const {JSDOM} = require('jsdom');

const urls = [];
urls.push("https://www.○○○○.jp/1");
urls.push("https://www.○○○○.jp/2");
urls.push("https://www.○○○○.jp/3");
urls.push("https://www.○○○○.jp/4");
urls.push("https://www.○○○○.jp/5");

urls.forEach((url)=>{
	getTitle(url);
});

function getTitle(url){
	rpn(url).then((body)=>{
		try {
			// const dom = new JSDOM(body);
			getDom(body).then((dom)=>{
				
				const selector = "#primary > div > div > div > article > header > h2 > a";
				const aList = dom.window.document.querySelectorAll(selector);
	
				aList.forEach((a)=>{
					console.log(a.textContent);
				});
		
				console.log("--------------------------------------------------------------------");
			});
			
		} catch (e) {
			console.error(e);
		}
	});
}

function getDom(body){
	return new Promise((resolve)=>{
		resolve(new JSDOM(body));
	});
}

GitHubのリンクです。
https://github.com/Megafriday/scraping/tree/request_promise

Comments

[jun68ykt]

ご質問に
> どのように修正をすれば、読み込んだ順番どおりに、出力されるのでしょうか？
とありますが、上記にある、

> 順番どおりに

とは、より詳しくいうと

配列urlsに入っているURLの順に

という解釈でよいでしょうか？

[TrueOgre2]

はい、配列urlsに入っているURLの順です。

[jun68ykt]

回答しました。参考になれば幸いです。

Answer 1

こんにちは

urls.forEach((url)=>{
    getTitle(url);
});

とすることで、urls の先頭から順に getTitle(url) が実行されますが、だからといって、各URLに対するHTTP(S)リクエストの返信が、リクエストした順に返ってくるとは限りません。urls に入っている順で結果も得たいのであれば、すべてのリクエストに対するレスポンスが返ってきてから、それぞれの結果を、urls に入っている順を保って得る必要がありますが、これを実現する方法として、

• Promise.all

を使うことが考えられます。すなわち、各リクエストをPromise にして、　すべてのリクエストが返ってきてから、urls の要素の順に、各レスポンスから取得した結果を表示するという制御を Promise.all で行います。

以下、そのコード例です。

'use strict';
const request = require('request');
const { JSDOM } = require('jsdom');

const urls = [];
urls.push("https://www.example.com/xxxxxxx");
urls.push("https://www.example.com/xxxxxxx/eapg/2");
urls.push("https://www.example.com/hogehoge");
urls.push("https://www.example.com/hogehoge/eapg/2");
urls.push("https://www.example.com/hogehoge/eapg/3");
urls.push("https://www.example.com/hogehoge/eapg/4");
urls.push("https://www.example.com/hogehoge/eapg/5");
urls.push("https://www.example.com/hogehoge/eapg/6");
urls.push("https://www.example.com/hogehoge/eapg/7");
urls.push("https://www.example.com/hogehoge/eapg/8");
urls.push("https://www.example.com/hogehoge/eapg/9");

Promise
  .all(urls.map(url => printTitle(url)))
  .then(results => {
    results.forEach(({ url, aList }) => {
      console.log(url);
      console.log([...aList].map(a => `\t${a.textContent}`).join('\n'));
    })
  }).catch(e => {
    console.error(e);
  })

function printTitle(url) {
  return new Promise((resolve, reject) => {
    request(url, (e, response, body) => {
      if (e) reject(e);
      try {
        const dom = new JSDOM(body);
        const selector = "#primary > div > div > div > article > header > h2 > a";
        const aList = dom.window.document.querySelectorAll(selector);
        resolve({ url, aList });
      } catch (e2) {
        reject(e2);
      }
    });
  });
}

なお上記では、ご質問にある GitHubレポジトリにあるコードをもとに修正しており、各URLを差し障りのないものに変えています。

以上、参考になれば幸いです。

追記

request のドキュメント を眺めていましたら、これを作っている同じチームで、Promiseでラップしたものも提供しているとの一節がありました。その提供されているものの中の request/request-promise を使うと、以下のような感じで、もっと短く書けそうです。

'use strict';
const rp = require('request-promise');
const {
  JSDOM
} = require('jsdom');

const urls = [];
urls.push("https://www.example.com/xxxxxxx");
urls.push("https://www.example.com/xxxxxxx/eapg/2");
urls.push("https://www.example.com/hogehoge");
urls.push("https://www.example.com/hogehoge/eapg/2");
urls.push("https://www.example.com/hogehoge/eapg/3");
urls.push("https://www.example.com/hogehoge/eapg/4");
urls.push("https://www.example.com/hogehoge/eapg/5");
urls.push("https://www.example.com/hogehoge/eapg/6");
urls.push("https://www.example.com/hogehoge/eapg/7");
urls.push("https://www.example.com/hogehoge/eapg/8");
urls.push("https://www.example.com/hogehoge/eapg/9");

const selector = "#primary > div > div > div > article > header > h2 > a";

Promise
  .all(urls.map(url => rp(url)))
  .then(htmls => {
    htmls.forEach((html, i) => {
      console.log(urls[i]);

      const dom = new JSDOM(html);
      const aList = dom.window.document.querySelectorAll(selector);
      console.log([...aList].map(a => `\t${a.textContent}`).join('\n'));
    })
  }).catch(e => {
    console.error(e);
  });

Comments

[TrueOgre2]

回答して頂いて、どうもありがとうございました。
めちゃめちゃ色々なテクニックやネーミングなど、勉強になることがありすぎて、大変うれしいです。
まだ、全部理解しきれていなのですが、これからじっくりと教えて頂いた回答とコードを、読んで習得したいと思います。

[jun68ykt]

どういたしまして。解決されたようでよかったです。
request の関連パッケージで request-promise というのがあり、これを使うとより短く書けそうだったので、回答に追記しました。ご参考まで。

[TrueOgre2]

どうもありがとうございます。
質問前に、「request-promise」や「request-promise-native」で何とかしようと考えたのですが、自分の実力が追いつかず、使いこなせなかったので追記のコード、大変嬉しいです。

[jun68ykt]

あ、そうなんですね。それはよかったです ????