window.fetch()について確認と備忘録です。

fetch()でできることの例

ポケモンのデータを取得してみる

index.htmlのscript内に下記を記載して、コンソールで確認。

fetch('https://pokeapi.co/api/v2/pokemon/1')
    .then((response) => response.json())
    .then((data) => console.log(data));

↓結果、フシギダネの情報が取れた。

fetch()とは

・グローバルのメソッド（window.fetch()）
・リソースを取得するためのインターフェース
　→上記例のようにHTTPリクエストを送信して外部データを取得したり、外部にデータを送信したりできる。
　→内部のjsonファイル取得なども可能。
・Promiseを返す

fetch()の使い方

async/awaitを使う方法と使わない方法がある

async/awaitを使う方法

async/awaitを使うことでResponseオブジェクトが返ってくるので、jsonメソッドで処理。

const getPokemon = async() =>{
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/1');
    const pokemonData = await response.json();
    console.log(pokemonData);
}
getPokemon();

↓結果(async/awaitを使わない方法と同じ)

エラー処理ありverのコード↓

const getPokemon = async() =>{
    try{
        const response = await fetch('https://pokeapi.co/api/v2/pokemon/1');
        const pokemonData = await response.json();
        console.log(pokemonData);
    }catch(error){
        // エラーが出た時の処理
        console.log(`エラー：${error}`);
    }
}
getPokemon();

async/awaitを使わない方法

Promise(※)が返ってくるので、thenメソッドで処理。

fetch('https://pokeapi.co/api/v2/pokemon/1')
    .then((response) => response.json())
    .then((pokemonData) => console.log(pokemonData));

↓結果(async/awaitを使う方法と同じ)

エラー処理ありverのコード↓

        fetch('https://pokeapi.co/api/v2/pokemon/1')
            .then((response) => response.json())
            .then((data) => console.log(data))
            .catch((error) => console.log(error.message));

※Promiseとは

非同期処理を扱うためのオブジェクト。
（これがないと、コールバック関数を使用して非同期処理完了後に実行したい関数を渡す必要があるため、コールバック地獄になりうる。）
async/awaitを使用することによって、非同期処理を扱いやすくしている。

その他

fetch()を使用できない古いブラウザでは、XMLHttpRequestやBabelを使ってトランスパイルする必要がある。

参考サイト

MDN
Fetch API fetch() の使い方