【Javascript】Promiseオブジェクト、async/await、「then()メソッド」、「catch()メソッド」とは

非同期処理とは

非同期処理とは実行中、別のタスクを行うことができる方式のことをいいます

非同期処理は制御が難しい

重い処理もユーザを待たせずほかの操作がサクサク可能となる（グーグルマップ等）メリットはありますが、デメリットもあります。

実行完了していない状態で、エラーがおきることがあります。

（原因の例）　「実行完了までデータが存在しない」という状態

→Promiseによって実行完了を待つことができます

Promiseオブジェクト

Promiseオブジェクトは3つの状態をもちます

Promiseを使った非同期処理の実装

1）失敗例：「fetch」によるGitHubのID取得を「待たずに」処理が実行

<script>
// 非同期処理をおこなう関数を宣言
const getGitUsername = () => {
    const url = 'https://api.github.com/users/ida240609'

    // GitHub APIをFetchメソッドで実行
    fetch(url).then(res => res.json())
        .then(json => {
            console.log('これは非同期処理成功時のメッセージです')
            return json.login
        }).catch(error => {
            console.error('これは非同期処理失敗時のメッセージです。', error)
            return null
        })

};

const message = 'GitのユーザーIDは'
const username = getGitUsername()
console.log(message + username)
</script>

console↓

GitのユーザーIDはundefined
これは非同期処理成功時のメッセージです

2）Promise：fetchによるGitHubのID取得「完了後」に処理が実行

<script>
// import fetch from 'node-fetch';

// 非同期処理をおこなう関数を宣言
const getGitUsernamePromise = () => {
    return new Promise((resolve, reject) => {
        const url = 'https://api.github.com/users/ida240609'

        // GitHub APIをFetchメソッドで実行
        fetch(url).then(res => res.json())
            .then(json => {
                console.log('これは非同期処理成功時のメッセージです')
                return resolve(json.login)
            }).catch(error => {
                console.error('これは非同期処理失敗時のメッセージです。', error)
                return reject(null)
            })

    })
};

const message = 'GitのユーザーIDは'
getGitUsernamePromise().then(username => {
    console.log(message + username)
});
</script>

console↓

これは非同期処理成功時のメッセージです（Promise）
GitのユーザーIDはida240609

2）async/await：fetchによるGitHubのID取得「完了後」に処理が実行

<script>
// 非同期処理をおこなう関数を宣言
const getGitUsernameAsyncAwait = async () => {
    const message = 'GitのユーザーIDは';
    const url = 'https://api.github.com/users/deatiger'

    const json = await fetch(url)
        .then(res => {
            console.log('これは非同期処理成功時のメッセージです（AsyncAwait）')
            return res.json()
        }).catch(error => {
            console.error('これは非同期処理失敗時のメッセージです（AsyncAwait）', error)
            return null
        });

    const username = json.login;
    console.log(message + username)
}

getGitUsernameAsyncAwait()
</script>

console↓

これは非同期処理成功時のメッセージです（AsyncAwait）
GitのユーザーIDはida240609

参考サイト