【JavaScript】fetchを用いてAPIからJSONデータを取得しDOM操作に利用する

fetch()とは

非同期のネットワーク通信を簡単にわかりやすく記述できるメソッド。クライアント側のJavaScritから、HTTPと通信しデータを取得することができるようになる。
(参考：MDN web docs 『Fetchを使う』 https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch ）

fetchで取得したデータからJSONを取得しDOM操作に利用する

例）以下のデータ構造を持つJSONデータから、nameとageを取得し画面に表示させる
{
"results":[
{ "name": "太郎",
"age": 20},
{ "name": "次郎",
"age": 25},
{ "name": "三郎",
"age": 30},
]
}

const url = //任意のAPIのhttpアドレス

//操作したいHTML領域を取得
const name = document.getElementById('name');
const age = document.getElementById('age');

//APIからJSONデータを取得する
fetch(url)
   .then((response) => {
       return response.json()　//ここでBodyからJSONを返す
   })
   .then((result) => {
       Example(result);  //取得したJSONデータを関数に渡す 
   })
   .catch((e) => {
       console.log(e)  //エラーをキャッチし表示     
   })
})

//JSONデータを引数に受け取ってDOM操作を行う関数を作成
function Example(jsonObj){
 const data = jsonObj.results[0]
 name.textContent = data.name;
 age.textContent = data.age;
}

ポイント１

then()メソッドを利用してfetch()の非同期処理を記述することにより、ネストが深くなるのを避けることができる。

エラーの処理も、例外処理であるcatch()を利用することで、チェーンとしてメソッドを繋ぐことができる。

（参考：MDN web docs　『Promise.prototype.then()』
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then）

ポイント２

fetchで取得してくるデータそのものはPromiseオブジェクトである。

const data = fetch()
   .then((response) => {
       return response.json()　//ここでBodyからJSONを返す
   })
   .then((result) => {
       Example(result);  //取得したJSONデータを関数に渡す 
   })
   .catch((e) => {
       console.log(e)  //エラーをキャッチし表示     
   })
})

console.log(data);　//コンソールに"Promise"と表示される

fetchで持ってくる値そのものはPromiseオブジェクト。DOM操作に利用したいのは、取得したJSONオブジェクトそのもの。

そのため、

fetch()メソッドの中に、JSONデータを渡す関数を記述し、引数としてJSONデータを渡す

必要がある。