【javascript】fetchで複数のページにアクセスし、アクセスした各ページからquerySelectorで要素を取得、その取得した要素を配列にしたい

Question

今ご覧いただいているteratailのページを例にお伝えさせていただきます。

ページ下部(「回答する」ボタンの下)の「関連した質問」の各質問のリンク先にfetchでアクセス
質問ぺージの要素(ページのタイトル)をquerySelectorで取得
取得した要素を配列にしたい

記述したコードは以下の通りです。
配列に格納することができず、ご教示いただきたいです。

let questionPageURL = document.querySelectorAll(".question_relatedQuestions__3rsYL .anchor_base__2hAGd"); // 「関連した質問」の各aタグを取得
let questionPageURLarray = []; // 取得したaタグのhrefを格納する用の空配列を作成
let questionPageHTMLtitleArray = []; // この後fetchでアクセスするページから取得する要素を格納する空配列を作成
for (let i = 0; i < questionPageURL.length; i++) {
  questionPageURLarray[i] = questionPageURL[i].getAttribute("href"); // 取得したaタグからhrefを取得し、ループでquestionPageURLの数だけそれを配列に格納
  fetch(questionPageURLarray[i]) // fetchで「関連した質問」の各リンク先にアクセス
    .then((response) => response.text())
    .then((text) => {
      let DOMtext = new DOMParser();
      let questionPageHTML = DOMtext.parseFromString(text, "text/html");
      let questionPageHTMLtitle = questionPageHTML.querySelector(".questionHeader_title__pUEK0"); // 「関連した質問」のリンク先ページのタイトルを取得
      questionPageHTMLtitleArray[i] = questionPageHTMLtitle; // 取得したリンク先のタイトルを配列に格納
    });
}
console.log(questionPageHTMLtitleArray);
// 結果  []

// 期待する結果 [h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0, h2.title_base__VKKOr.questionHeader_title__pUEK0]

Answer 1

setTimeouを活用することで何とか期待の挙動にできました。
int32_t様、yambejp様
お伝えいただいたアドバイスを活かせず申し訳ございません。
非同期処理についてもう少し勉強してみます！

let questionPageURL = document.querySelectorAll(".question_relatedQuestions__3rsYL .anchor_base__2hAGd"); 
let questionPageURLarray = []; 
let questionPageHTMLtitleArray = []; 
function func() {
  for (let i = 0; i < questionPageURL.length; i++) {
    questionPageURLarray[i] = questionPageURL[i].getAttribute("href"); 
    fetch(questionPageURLarray[i]) 
      .then((response) => response.text())
      .then((text) => {
        let DOMtext = new DOMParser();
        let questionPageHTML = DOMtext.parseFromString(text, "text/html");
        let questionPageHTMLtitle = questionPageHTML.querySelector(".questionHeader_title__pUEK0"); 
        questionPageHTMLtitleArray[i] = questionPageHTMLtitle; 
      });
  }
  setTimeout(() => {
    console.log(questionPageHTMLtitleArray);
  }, 1000)
}
func()

Comments

[hosax]

もしどなたかPromiseやasync/awaitで実装できるよ！という方法あれば是非ご教示くださいませ。

[int32_t]

setTimeout() だとネットワークやCPUの負荷が高いときに取りこぼしがあります。この方法を使ってはいけません。

Answer 2

いかのような感じでどうでしょう？

const list=["sample1.html","sample2.html","sample3.html"];
list.forEach(x=>fetch(x).then(res=>res.text().then(console.log)));

Comments

[hosax]

アドバイスありがとうございます！
ご教示いただいた内容を元にコードを書いたところ、以下のような結果となりました。

```js
let questionPageURL = document.querySelectorAll(".question_relatedQuestions__3rsYL .anchor_base__2hAGd");
let questionPageURLarray = [];
let questionPageHTMLtitleArray = [];
for (let i = 0; i < questionPageURL.length; i++) {
questionPageURLarray[i] = questionPageURL[i].getAttribute("href");
}
questionPageURLarray.forEach((questionPageURLarray) =>
fetch(questionPageURLarray).then((res) =>
res.text().then((text) => {
let DOMtext = new DOMParser();
let questionPageHTML = DOMtext.parseFromString(text, "text/html");
let questionPageHTMLtitle = questionPageHTML.querySelector(
".questionHeader_title__pUEK0"
).innerHTML;
questionPageHTMLtitleArray.push(questionPageHTMLtitle);
})
)
);
console.log(questionPageHTMLtitleArray);
//結果
[]
0: h2.title_base__VKKOr.questionHeader_title__pUEK0
1: h2.title_base__VKKOr.questionHeader_title__pUEK0
2: h2.title_base__VKKOr.questionHeader_title__pUEK0
3: h2.title_base__VKKOr.questionHeader_title__pUEK0
4: h2.title_base__VKKOr.questionHeader_title__pUEK0
5: h2.title_base__VKKOr.questionHeader_title__pUEK0
6: h2.title_base__VKKOr.questionHeader_title__pUEK0
7: h2.title_base__VKKOr.questionHeader_title__pUEK0
length: 8
[[Prototype]]: Array(0)
```

これは配列にはなっていなけれども、値は取得できている？という挙動なのでしょうか、、、
もし何かお気づきのことがございましたらお伝えいただけますと幸いです。
引き続きチャレンジしてみます！

Answer 3

then()に渡している関数は非同期に実行されます。forループやconsole.log(questionPageHTMLtitleArray)よりも後に実行されることになります。

Promise.all() ですべての fetch() の完了を待つとか、async await で逐次的に実行しましょう。

Comments

[hosax]

ご教示ありがとうございます！
アドバイス頂いた内容を参考に再度チャレンジしてみます！

[hosax]

こちらアドバイスをいただいた内容を元にPromise.all()を利用して以下のように記述したところ、
Uncaught (in promise) TypeError: response.text is not a function at <anonymous>:8:34
とのエラーがでてしまいました。
```js
let questionPageURL = document.querySelectorAll(".question_relatedQuestions__3rsYL .anchor_base__2hAGd");
let questionPageURLarray = [];
let questionPageHTMLtitleArray = [];
for (let i = 0; i < questionPageURL.length; i++) {
questionPageURLarray[i] = fetch(questionPageURL[i].getAttribute("href"));
}
Promise.all(questionPageURLarray)
.then((response) => response.text())
.then((text) => {
let DOMtext = new DOMParser();
let questionPageHTML = DOMtext.parseFromString(text, "text/html");
let questionPageHTMLtitle = questionPageHTML.querySelector(".questionHeader_title__pUEK0");
questionPageHTMLtitleArray = questionPageHTMLtitle;
});
console.log(questionPageHTMLtitleArray);
```

エラー内容を調べたところ
「Fetchは非同期なので、response.text()を呼び出した時点では、実はまだレスポンスがないのです。response = await fetch を使うか、コールバックを使うか、どちらかです。」
と記述されたページが見つかりましたので、引き続きチャレンジしてみようと思います。
期待する挙動となりましたらご報告させていただきます。
アドバイスありがとうございます！

参考：https://stackoverflow.com/questions/61838276/why-do-i-got-uncaught-typeerror-response-text-is-not-a-function-error-when-try

[int32_t]

> Promise.all(questionPageURLarray)
> .then((response) => response.text())

このコードの場合 response は配列になります。

Promise.all(questionPageURLarray)
.then(responses => Promise.all(responses.map(response => response.text()))
.then(texts => {
questionPageHTMLtitleArray = texts.map(text => { return new DOMParser().parseFromString(text, "text/html").querySelector(...); });
console.log(questionPageHTMLtitleArray);
});
こんな感じじゃないでしょうか。

async/await の方が簡単だと思います。

g