非同期処理/エラーハンドリング

自分用チートシートです。

Promiseを返さない非同期関数

これらはブラウザやNode.jsに組み込まれたAPIで、処理の完了をコールバック関数で通知します。

一定時間後に処理を実行: setTimeout(callback, delay)

setTimeout(() => { 
    console.log("1秒後に一度だけ実行されます"); 
}, 1000); // 1000ミリ秒 (1秒) 後

一定間隔で処理を実行: setInterval(callback, delay)

const intervalId = setInterval(() => { 
    console.log("1秒ごとに繰り返し実行されます"); 
}, 1000); // 1000ミリ秒 (1秒) ごと 

タイマーを停止: clearTimeout(timeoutId) / clearInterval(intervalId)

// setTimeoutをクリア 
const timeoutId = setTimeout(() => console.log("実行されない"), 5000); 
clearTimeout(timeoutId); // 500ミリ秒以内にクリアすると実行されない

// setIntervalをクリア 
const intervalIdToClear = setInterval(() => console.log("繰り返し中"), 1000); 
setTimeout(() => { 
    clearInterval(intervalIdToClear); 
    console.log("インターバルを停止しました"); 
}, 3500); // 3.5秒後にインターバルを停止 

Promiseを返す非同期関数

Promiseは、非同期操作の最終的な完了（または失敗）とその結果の値を表すオブジェクトです。チェーン可能で、エラーハンドリングを一元化しやすいのが特徴です。

データの取得・送信: fetch(url, options)

ネットワークリクエストを行うためのモダンなAPIです。Promiseを返します。

// GETリクエストの例: 
fetch('https://jsonplaceholder.typicode.com/posts') 
    .then(response => response.json()) // JSONとしてパース 
    .then(data => console.log('GETデータ:', data)) 
    .catch(error => console.error('GETエラー:', error)); 

// POSTリクエストの例: 
fetch('https://jsonplaceholder.typicode.com/posts', { 
    method: 'POST', 
    headers: { 
        'Content-Type': 'application/json' 
    }, 
    body: JSON.stringify({ 
        title: '新しい投稿', 
        body: 'これはテスト投稿です', 
        userId: 1 
    }) 
}) 

    .then(response => response.json()) 
    .then(data => console.log('POSTデータ:', data)) 
    .catch(error => console.error('POSTエラー:', error)); 

非同期関数の利用: async / await

Promiseをより同期的なコードのように書くための構文です。可読性が非常に高まります。エラーハンドリングは try...catch で行います。

async function fetchPostsData() { 
    try { 
        // awaitでPromiseの解決を待つ 
        const response = await fetch('https://jsonplaceholder.typicode.com/posts'); 
        // HTTPエラーが発生した場合のチェック（fetchはネットワークエラー以外ではrejectしない） 
        if (!response.ok) { 
            throw new Error(`HTTP Error! Status: ${response.status}`); 
        } 
        const data = await response.json(); 
        console.log('async/await データ:', data); 
    } catch (error) { 
        // Promiseがrejectされた場合や、throwされたエラーをここでキャッチ 
        console.error('async/await エラー:', error); 
    } 
} 

fetchPostsData(); // 非同期関数の呼び出し 

Promiseを返さない非同期処理をPromiseでラップする

setTimeout や setInterval のような旧来のコールバックベースのAPIを、PromiseベースのAPIに変換することで、async/await で扱いやすくしたり、Promiseチェーンに組み込んだりできます。

// Promiseを返さない関数をラップする例 
const delay = (ms) => { 
    return new Promise(resolve => { 
        setTimeout(resolve, ms); // 指定時間後にPromiseを解決する 
    }); 
}; 

const fetchDataWithCallback = (callback) => { 
    setTimeout(() => { 
        callback("コールバックで取得したデータ"); 
    }, 1000); 
}; 

// コールバックベースの関数をPromiseでラップ 
const fetchPromiseData = () => { 
    return new Promise(resolve => { 
        fetchDataWithCallback(data => { 
            resolve(data); 
        }); 
    }); 
}; 

// async/await を使ってラップした関数を呼び出す 
async function processWrappedFunctions() { 
    console.log("処理開始"); 
    await delay(1500); // 1.5秒待つ 
    console.log("1.5秒経過"); 

    const data = await fetchPromiseData(); 
    console.log("ラップされた非同期関数からのデータ:", data); 

    console.log("処理終了"); 
} 

processWrappedFunctions();