fetch()でweb APIのデータを読み込む - JavaScriptのチュートリアル

このレッスンでは、fetchを使って Web APIからのデータの読み込みを 完結させてみます。 「完結させる」と言ったのは 今開いてるこのコードなんですが、 fetch を使っていますけれども まだ欲しいデータの取得までは できていません。 fetch を使って そして内部的には promise で 処理されていまして promise が返ります。 ですから then で そのあとの処理を書きます。 ここまではいいですね。 そうすると response。 APIにアクセスして結果が返ってきたと。 それを受け取るので これはテキストデータです、この場合は。 それを json に変換するということも このAPIの中の処理でできます。 でもここで、返ってくるのは やはり promise です。 ですからこのまま 欲しいデータを取り出そうとしても promise が解決するまで 取得はできないんですね。 ですからこの状態で promise が返ってきたと いうことを確かめてみたいと思います。 この関数は url を渡して そして fetch にそれを渡して 読み込むというふうになっていますね。 ここまでの結果を確かめてみましょう。 「Console」には Promise というふうに 表示されていますね。 三角を押すと もうちょっと中が分かるんですが、 ここでは解決されました。 この「Console」上ではですね。 解決された暁には people というプロパティが出来上がり そこに配列ですね。 現在、宇宙で働いている 活躍している人たちのデータが あるわけですけれども 名前とそれから所属する宇宙船ですね。 これを取り出したいんですけれども コードの中で、Promiseの段階で people ありますか、と聞いても まだPromiseなのでありません、と 答えられてしまいます。 ということですからそこでも 処理待ちをする必要があるわけですね。 ではこの response.json の呼び出しを 待ち受けをします、ということで まだこれは早いので 待ち受けは promise を使います。 return で new Promise、 そして resolve を引数に受け取った 関数ですね。 アロー関数式にしまして そしてこの中に これは一応メモとして…