Promiseを使った非同期処理のやり方

こんにちは、フロントエンド開発や Web 技術についての 執筆、講習を行っている 野中文雄です。 今週は新しい promise クラスで Web API からデータを読み込む 非同期処理について説明します。 Web API を使って データを読み込むんですけど API はこのOpen Notify という サイトのものを利用したいと思います。 ドメインが open-notify.org ですね。 これは NASA のデータが読み込める ということで ちょっと先進的な感じがするんですけど その中の Number of People in Space 宇宙に何人、人がいるかということで 六人いるらしいんですが この六人のデータが取れる API というのが ここから提供されています。 こちらがその JSON をとってくる URI なんですけど データがどういう形になっているかというと これですね。 これがサンプルなんですが、 message に 成功すれば success ですね。 それから number、 ここは実際に例えば六人とかと いう数字がでてきます。 あとこの people というのが 配列になっているんですけど 実際にその宇宙にいる人たちの 名前とクラフトというのが提供されています。 具体的にはというと じゃあ開けてみましょうか。 こんな感じですね。 message success です。 number は６ということで people に配列で ６名のデータ、プロパティが２つずつ が入っている。 これを JavaScript のコードで 読み込んでみたいと思います。 ではこの URL、 これはコピーしておきましょう。 コピーした URL は 早速変数に入れておきます。 const で url で 今コピーした URL を ペーストします。 そして読み込む処理は 関数にしましょう。 function ということで getSpacePeople 引数は url とします。 さて、この中に処理を書くんですが 非同期の処理を扱う時には XMLHttpRequest という クラス、オブジェクトを使います。 それをまずインスタンスを作って 変数に入れるんですけど request ということで new の XMLHttpRequest、長いですね。…