【React】Fetch APIでサーバーからのレスポンスデータを受け取る方法

今回は、以前にも紹介させていただいた Fetch API のレスポンスデータの取得方法についてです。
ステータスやステータステキスト等は、サンプルコードを参考にして取得ができたのですが、例えばログイン処理成功時に返ってくるユーザー情報といったレスポンスデータをどう取得していいのかが分からず、若干手間取りました。

今回参考にさせていただいた記事はこちらから。

Fetch API response.json()のレスポンスがPromise objectを返す
https://blog.yayoc.com/javascript/2016/12/08/es6-fetch-promise.html

こちらの記事によると、Fetch API のレスポンスは下記のように記述すると取得できるとのことでした。

fetch([アクセスしたいURL]).then(function(response) {
  response.json().then(data => {
    // レスポンスデータ
    console.log(data);
  }
}, function(error) {
  console.log(error.message);
});

参考サイトによると、「.json() 関数は、response ボディを受け取るための Promise を得るために実行する関数となります。」とのこと。
で、response.json() は Promise object を返すように設計されているので、上記コードの 2行目のような処理が必要になるようでした。

正直、完全には理解できていませんが、とりあえず、上記コードでレスポンスデータがきちんと取得できることは確認できました。
内容については、時間を見つけてまた改めて勉強したいと思います。

以上、Fetch API のレスポンスデータを取得する方法でした。
ご参考になれば幸いです。