🎉

【JavaScrpipt】fetch API

2025/10/30に公開

外部APIを非同期処理するための命令。jsonで渡されることが多い
戻り値はPromiseという処理のオブジェクトで、非同期処理の状態によって値が変わる
Pendingという値から始まり、処理が完了したらFullfiled、エラーの場合はRejectedになる
以前は.then()、.catch()という命令を使うこともあった

function showHeader() {
    console.log('Header');
}

// aysync、await を付けると、Pendingの後の処理後の値をResponseオブジェクトとして返される
async function showUsers() {
    try { // try...catchでエラーの場合を出し分けられる
        const response = await fetch('外部URL.json');
        const users = await response.json();
        console.log(users);
    } catch(err)
        console.log('エラーです。');
    }
}

function showFooter() {
    console.log('Footer');
}

showHeader();
showUsers();
showFooter();

関数式でも使えるが、asyncの位置を注意

function showHeader() {
    console.log('Header');
}

const showUsers = async () => {
    try {
        const response = await fetch('外部URL.json.json');
        const users = await response.json();
        console.log(users);
    } catch (err) {
        console.log('エラーです。');
    }
};

function showFooter() {
    console.log('Footer');
}

showHeader();
showUsers();
showFooter();

Discussion

juner

以前は.then()、.catch()という命令を使うこともあった

async await を使うことで表面的には使わないだけなので暗黙的には Promise を使う以上使うのでは……？

nishimoto

ありがとうございます！Promiseの理解が足りなかったのでメモを追記しました。

戻り値はPromiseという処理のオブジェクトで、非同期処理の状態によって値が変わる

また、async awaitを使わない、Promiseの記述を下記にメモしました。

function showUsers() {
    fetch('外部URL.json')
        .then((response) => { // FullfiledになったPromisの値がここにセットされる
            return response.json();
        })
        .then((users) => { // Fullfiledになった場合の処理をここに書く
            console.log(users);
        })
        .catch((err) => {
            console.log('エラーです。');
        });
}