##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データを渡す
必要がある。