node.jsでpromiseを使って再帰的にURL一覧を作成したい

Question

前提・実現したいこと

Promiseの勉強を兼ねて、node.jsでクローラーを作っています。基本的には、URLにアクセスしてサイト内リンクが見つかったら再起的にリンクを探すというものです。
色々と試しているのですが、「クローリングが完了する前に次のステップに進んでしまう」「取得したURLを無視して永久ループに陥ってしまう」など、こちらの期待通りに動いてくれません。

Promiseの挙動を完全に理解していないこともあり、アドバイスを頂戴できれば幸いです。

これをマスターしたら async/awaitにも挑戦したいのですが、まずはpromiseの理解を優先しています。

該当のソースコード

/*
 * Modules
 */

const fetch = require('node-fetch');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

/*
 * Config
 */

const base_url = "https://www.example.com/";

/*
 * Functions
 */

let urls = {};

function parserHtmlByUrlPromised(url) {

    return new Promise((resolve, reject) => {


        // 処理開始
        console.log("Requesting HTML: " + url);

        // 結果用オブジェクトの初期化
        if (typeof urls[url] !== 'undefined') {
            resolve("Already Created");
        }
        urls[url] = {};

        // HTMLを取得
        fetch(url, {})
            .then(res => {
                if (res.ok) { // res.status >= 200 && res.status < 300
                    return res;
                } else {
                    urls[url].success = false;
                    urls[url].error_msg = res.statusText;
                    reject();
                }
            })
            .then(res => res.text())
            .then(html => {
                // HTMLのパース
                const dom = new JSDOM(html, { url: base_url });
                // TITLE
                urls[url].title = dom.window.document.querySelector('title').textContent;
                // URLの洗い出し
                var abc = dom.window.document.querySelectorAll('a')
                    .forEach(a => {
                        // 不適切なURLは無視
                        if (typeof a.href !== 'undefined' && a.href.indexOf(base_url) === -1) return;
                        if (a.href.match(/.(css|jpg|png|gif|pdf)($|?.*)/)) return;

                        // 処理済みかどうかを確認
                        if (typeof urls[target_url] === 'undefined') {

                            // ここを無効にすると無限ループ（なぜ？）
                            urls[target_url] = {};

                            // 再帰的に処理
                            parserHtmlByUrlPromised(target_url)
                                .then(() => {
                                    return Promise.resolve();
                                });
                        }
                    })
                    // HTMLのパース終了
                resolve(url);
            }).catch(e => {
                urls[url].success = false;
                urls[url].error_msg = e;
                reject();
            })
    });
};

/*
 * Main
 */
parserHtmlByUrlPromised(base_url)
    .then(() => {
        console.log(urls);
    })
    .catch(error => {
        console.error(error);
    });

試したこと

• 上記コードだと、クロールが完了する前に次のステップ（最後のthen）が実行される
• 結果を入れる変数（urls）をparserHtmlByUrlPromised()の中に入れてresolve()で返すようにしたら無限ループになる
• Promiseを使ってディレクトリを再帰的に辿ってファイル一覧を取得する - Qiitaを参考に再帰のところでPromise.all()を使ってみたけど無限ループになる

補足情報（FW/ツールのバージョンなど）

• v16.3.0

Answer 1

これをマスターしたら async/awaitにも挑戦したいのですが、まずはpromiseの理解を優先しています。

「Promiseとループを組み合わせる」というのは相当に書きづらいです。async/awaitで書くことをおすすめします。

Comments

[sebisawa]

ありがとうございます。async/awaitでの実装も視野に入れます。可能でしたら、上記コードのどこにasync/awaitをセットすればよいか、ヒントだけでもいただけると助かります。

[maisumakun]

await fetchで結果を取得すれば、その値を普通に利用可能です。

[sebisawa]

回答が遅くなってしまい恐縮です。下記のURLを参考に、まずはasync/awaitでのfetchを実装していきます。
https://qiita.com/fumiya-kume/items/f38ef90fe995ef0a3269

[sebisawa]

async/awaitで書き直してみましたが、まだ解決に至っていません。

私の期待は、mainでcrawlWebPage()を呼び出し、crawlWebPage()で処理が完全に終わってから次のステップに進むというものです。

最初のfetchは待ってくれるようになったのですが、そのページにあるリンクに対して再帰的にcrawlWebPage()を実行させると、それらの処理は待ってくれないです。
```
urls[url].links.forEach(async url => {
await crawlWebPage(url);
})
```

恐縮ですが、アドバイスをいただけると助かります。

```
/*
* Modules
*/

const fetch = require('node-fetch');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

/*
* Config
*/

const BASE_URL = "https://www.example.com/";
const IGNORE_QUERY_PARAMS = ['utm_campaign', "utm_source", "utm_keyword", "utm_content", "utm_medium"];

/*
* Global Object(s)
*/

let urls = {};

/*
* Functions
*/

// 非同期で HTMLのタイトルを取得
const getHtmlByUrl = async(url) => {
if (typeof urls[url] !== 'undefined' && typeof urls[url].html !== 'undefined') return;
try {
const res = await fetch(url);
if (!res.ok) throw NodeFetchError(res.statusText);
return res.text();
} catch (e) {
console.error('Fetch failed: ' + e);
return;
}
};

// URLの有効性をチェック
const isUrlEligible = (url) => {
if (typeof url !== 'undefined' && url.indexOf(BASE_URL) !== 0) return false;
if (url.match(/.(css|jpg|png|gif|pdf)($|?.*)/)) return false;
return true;
}

// URLのフォーマット
const formatUrl = (url) => {
var formatted = url;
IGNORE_QUERY_PARAMS.forEach(param => {
var regexp = new RegExp(param + "=[^&]*");
formatted = formatted.replace(regexp, "");
});
formatted = formatted
.replace(/#.*$/, '')
.replace(/?&$/, '')
.replace(//index.(html?|php|asp|cgi|jsp)??/, '');
formatted += formatted.match(/(.(php|html?|jsp|cgi)|/)$/) ? '' : '/';
return formatted;
}

// 重複を除外したURL一覧を生成
const getLinkUrlsFromDom = (dom) => {
var url_list = {};
dom.window.document.querySelectorAll('a')
.forEach(a => {
if (!isUrlEligible(a.href)) {
return;
}
url_list[formatUrl(a.href)] = 1
});
return Object.keys(url_list);
}

// Webページのクロール
const crawlWebPage = async(url) => {

// グローバルオブジェクトの初期化
if (typeof urls[url] !== 'undefined') return;
urls[url] = {};

// HTMLの取得
const html = await getHtmlByUrl(url);
if (!html) {
urls[url].is_success = false;
return;
}

// HTMLのパース
const dom = new JSDOM(html, { url: BASE_URL });

// 取り出したい情報
urls[url].title = dom.window.document.querySelector('title').textContent;

// HTMLに含まれるリンクの一覧を生成（重複は除外）
urls[url].links = url_list = getLinkUrlsFromDom(dom);

urls[url].links.forEach(async url => {
await crawlWebPage(url);
})
}

// main
(async() => {

// URLからページの情報を取得してグローバルオブジェクトを更新
await crawlWebPage(BASE_URL);

// ここで待ってほしい！！！

// URL一覧にあるURLにもアクセス
console.log(urls);
})();
```

[maisumakun]

Array.forEachはasync-awaitと無関係に進行します。for-ofで回せば、awaitで待機して1つずつ進みます。

[sebisawa]

早速のコメントありがとうございます！　これから仕事なので、夜に試して報告します。

[sebisawa]

maisumakin 様、アドバイスありがとうございます。なんとか動作するものが完成しました。コメントに記すには長すぎるのでQiitaに投稿しました。本当に助かりました。
https://qiita.com/sebisawa/items/c3d884a7bc0f1ef20222