Promise.all・非同期処理での通信待機について

前提

promiseについて知識不足で、お手数ですが伺えれば幸いです。

実現したいこと

リスト（配列）にあるファイルをfetchしてきて、データがあればデータを配列に格納し、
データがなければnullを格納したいです。
その後、次の処理に進みたいです。

該当ソースコード

現在、取得できているデータ量がバラバラとなっており、promise.allがうまく使えていないと思います。

javascript
1  const getData_A = async () => {
2    await Promise.all(
3      Files.map((req, idx) => {
4        const res = fetch(req);
5
6        const data = res.then((response) => {
7          if (response.ok) {
8            return response.json();
9          }
10          if (!response.ok) {
11            return null;
12          }
13        }).then((value) => {
14          value !== null ? (Obj[idx + 1] = value) : (Obj[idx + 1] = null);
15        });
16      })
17    );
18  }
19
20const processAll = async function () {
21　// Aと同じようにB、Cも別で取得しようとしてます。
22　Promise.all([getDataA(), getData_B(), getData_C()]).then((res) => {
23　　　　　　　　　　　// 別処理へ。
24　});
25};
26
27processAll();
28

なにかおわかりになりましたら、ご指導いただければ幸いです。

yambejp

2022/10/26 08:36

データがあればとかなければ・・・をきちんと定義したほうがよいでしょう。受け取るデータはjsonであれば文法違反でなければ必ずデータはあると思いますが・・・

takamon

2022/10/26 13:47

ご指摘の内容はごもっともです。 fetchしてきたデータの流れや、データの有無など、状況と状態を把握してコードを書けるようにしたいと思います。今回は、あるタイミングで新規JSONが追加配信されるというもので、ファイル名はわかっているので、配列でファイル名を記載しておき、ループでajaxしたいというものです。データがないというあやふやな書き方で、申し訳ありません。ファイルがない場合もあるということを想定して書きたいなと思ってる次第です。ご指摘ありがとうございました。

行動規範の内容に同意します

回答2件

ベストアンサー

押さえておくことは以下の4点です。

Promise.all() には引数としてPromiseオブジェクトの配列を渡す必要がある。
配列のmapメソッドでPromiseの配列を作るのであれば、mapメソッドの引数に渡すコールバック関数は Promiseを返していなければならない。
関数 fetch() はPromiseを返す
Promiseのインスタンスメソッドの then (や catch )メソッドもまたPromiseを返す

上記を確認するためのサンプルを下記のcodepenに作りました。

👉 https://codepen.io/su507/pen/ZEREjdX?editors=0010

手元にコピペするなりして各処にconsole.logを入れたり、コードを短く書いているところを補ったりして修正しながら動かしてみてください。（codepen にユーザー登録するとforkして自分のコードとしてブラウザ上で修正できます。）

この例では

データのfetch元に jsonplaceholder というサービスを使っています。
Files オブジェクトは A, B, C というキーを持つオブジェクトです。
Filesの各キーの値はjsonplaceholderからデータを取得するURLの配列です。A はユーザー、BはTODOアイテム、C は何らかの投稿の各1アイテムを取得するURLの配列になっています。
AとB のURL配列の3つめの要素はデータが取得できないURLにわざとしています。これらのURLのA のほうはユーザーIDが9999のユーザー情報を取得しようとして 404 NOT FOUND が返されるURLです。B のほうはURL先頭のhttps を hoge に変えて fetch 自体がエラーになるようなURLにしています。
processAll関数は、File オブジェクトが持つ各URLに対してfetchを実行してその結果をテーブルに表示します。

このサンプルについての不明点はコメントいただければ返信します。

補足

何となく分かった気になったという理解の仕方では白紙の状態からやりたいことを実現するコードを独力で書ききるところまで行くのは難しいです。
JavaScript Promiseの本などを読み、様々な概念や仕組み、メソッドについての理解を試すサンプルコードを作成してみるのがよいでしょう。

投稿2022/10/25 21:21

退会済みユーザー

総合スコア0

takamon

2022/10/26 13:39

ポイントなど、細かく記載いただき、またサンプルまで本当にありがとうございます。なんとなくわかった程度ではいけないとは思いつつ、苦手意識から、避けてしまっていたように思います。帰宅後にすぐ試してみたいと思います。参考書籍まで本当にありがとうございます。

takamon

2022/11/03 17:18

とても丁寧にご回答いただきありがとうございます。内容を確認してコードを修正して見ました。サンプルや参考までいただき、感謝です。以下、変更後になります。 ---------------------------------------------------- const getData_A = async () => { let results = []; Files.forEach((req) => { results.push(getfetchData(req)); }); return Promise.all(results); }; async function getfetchData(req) { const promise = fetch(req); return promise .then((response) => { if (response.ok) return response.json(); if (!response.ok) return null; }) } const processAll = async function () { await Promise.all([getData_A(), getData_B(), getData_C()]).then((res) => { // 以降の処理 }); }; $(async function () { await processAll(); }); としてみました。ありがとうございました。

退会済みユーザー

2022/11/03 19:34

解決されたようですね、よかったです👏

行動規範の内容に同意します

Promise.allに対しては、Promiseの配列を渡さないと意味がありません。

mapの中でthenをセットしているので、このthenはPromise.allと無関係に、それぞれの通信が終わったタイミングで実行されてしまいます。

投稿2022/10/25 14:21

maisumakun

総合スコア146544

takamon

2022/10/25 16:33 編集

そうそうにご回答ありがとうございます。こちら、問題箇所をご指摘いただいて本当にありがとうございます。ですが、少し不安でもあります。自分は、promiseを配列に格納するという認識が全くありませんでした。本当にありがとうございます。厚かましいかとは思いますが、もしもコードにおかしい点がございましたらご指摘いただけるとうれしいです。 ```javascript const getData_A = async () => { const results = []; File.forEach((req, idx) => { const res = fetch(req); results.push(res); }); results.forEach((each, idx) => { each .then((response) => { if (response.ok) return response.json(); if (!response.ok) return null; }) .then((value) => { value !== null ? (Obj[idx + 1] = value) : (Obj[idx + 1] = null); }); }); return Promise.all([Obj]); }; ``` 迅速にご回答いただきありがとうございます。