by

JavaScriptで複数のJSONを非同期で読み込み

カテゴリー：JavaScript

記事作成日：2022-01-06

IE(Internet Explore)が消滅して当たり前にモダンJavaScriptつまりES2015,ES2017,ES2022が使用できる環境が整った。

JavaScriptで複数のJSONを読み込むコードを書いてみた。

```
class Fetches {
	'use strict';
	#_responseObjs;
	//@param array urls [path1] | [path1,path2] | ...
	jsonObjs(urls) {
		return new Promise((resolve) => {
			(async () => {
				try {
					const fetchUrlPromises = urls.map(
						url => fetch(url,{method:'GET'})
							.then(response => {
								if (response.ok) {
									return response.json();
								}
								throw new Error('Network response was not ok');
							})
					);
					this.#_responseObjs = await Promise.all(fetchUrlPromises);
					resolve();
				} catch (error) {
					console.error(error);
				}
			})();
		}).then(() => {
			return this.#_responseObjs;	//urlsと同じ数の配列が返る [objs1] | [objs1,objs2] | ...
		});
	}
}

const _path1 = 'path/to/a1.json';
const _path2 = 'path/to/a2.json';
const _path3 = 'path/to/a3.json';
let _obj1;
let _obj2;
let _obj3;
(new Fetches()).jsonObjs([_path1,_path2,_path3])
	.then((res) => {
		[_obj1,_obj2,_obj3] = res;
		render();
	});

function render() {
	//次の処理
}
```

_path1のJSONは _obj1 として読み込まれる。<br>
_path2のJSONは _obj2 として読み込まれる。<br>
_path3のJSONは _obj3 として読み込まれる。

CONTENTS

JavaScriptで複数のJSONを非同期で読み込み

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他