空の配列にスクレイピングしたHTMLデータを入れてインスタンス化して返したい

Question

前提・実現したいこと

空の配列にスクレイピングしたHTMLデータを入れてインスタンス化して返したい
this.data = [];

発生している問題・エラーメッセージ

console.log(article);で返ってきた中身です。
このdata[]の中身を入れて返したい🙏

Article {
  url: 'https://〜',
  wrapClass: '.mus_info',
  title: 'h2',
  text: 'p',
  data: []
}

該当のソースコード

class Article {
	constructor(url, wrapClass, title, text) {
		Object.assign(this, url, wrapClass, title, text);
		this.data = [];　// この空の配列の中に入れて返したい
		this.getData(this.data, this);
	}

	getData(data, prop) {
		axios(prop.url)
			.then((response) => {
				const htmlParser = response.data;

				const $ = cheerio.load(htmlParser);

				$(prop.wrapClass, htmlParser).each(function () {
					const titleName = $(this).find(prop.title).text();
					const textName = $(this).find(prop.text).text();
					data.push({ titleName, textName });　// ここでh2とpタグを代入
				});
			})
			.catch((error) => {
				console.log(error);
			});
		return data;
	}
}

const URL = 'https://〜';

const article = new Article({
	url: URL,
	wrapClass: '.mus_info',
	title: 'h2',
	text: 'p',
});

console.log(article);

補足情報

node：v16.3.0
axios:：v0.21.4
cheerio：v1.0.0-rc.10
express ：v4.17.2

---

初心者なので間違っているコードなど汚いコードなどありますが許してください
汚いコードなど訂正があれば教えてください😓

Answer 1

node-fetch を入れたのですがうまくいかなかったので axios に戻してすると上手くいきました。

class Article {
	constructor(url, wrapClass, title, text) {
		Object.assign(this, url, wrapClass, title, text);
		this.data = []; // この空の配列の中に入れて返したい
		return this.getData(this.data, this); // this で解決される Promise を返す。
	}

	getData(data, prop) {
		return axios(prop.url)
			.then((response) => {
				const htmlParser = response.data;

				const $ = cheerio.load(htmlParser);

				$(prop.wrapClass, htmlParser).each(function () {
					const titleName = $(this).find(prop.title).text();
					const textName = $(this).find(prop.text).text();
					data.push({ titleName, textName });
				});

				return this;
			})
			.catch((error) => {
				console.log(error);
			});
	}
}

(async () => {
	const URL = 'https://~';

	const article = await new Article({
		url: URL,
		wrapClass: '.mus_info',
		title: 'h2',
		text: 'p',
	});

	console.log(article);
})();

Answer 2

axios の非同期処理の解決を待っていないのが原因だと思います。
いろいろな解決方法があると思いますが、インスタンスで解決する Promise をコンストラクタが返すようにするのはどうでしょうか。

axios は詳しくないので、fetch API で書くとこんな感じでしょうか。

  class Article {
    constructor(url, wrapClass, title, text) {
      Object.assign(this, url, wrapClass, title, text);
      this.data = []; // この空の配列の中に入れて返したい
      return this.getData(this.data, this); // this で解決される Promise を返す。
    }

    getData(data, prop) {
      return fetch(prop.url) // Promise を返す
        .then((response) => {
          // 省略
          data.push({
            'test': 'test'
          }); // ここでh2とpタグを代入したつもり
          return this // this で解決
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }

  (async () => {
    const URL = '/';

    const article = await new Article({ // await で解決を待つ
      url: URL,
      wrapClass: '.mus_info',
      title: 'h2',
      text: 'p',
    });

    console.log(article)
  })();

問題は、クラス構文で書いて new で呼んでいるのに Promise が返ってくるという気持ち悪さでしょうか。