async/awaitについて理解する

async/await、なんとなく知ってるけどなんとなく使い方が分からないまま放置してしまい今に至るので、自分で色々な書き方を試して理解を深めてみた。

以下例などはほぼMDNですが、自分がMDN以外からも学んだ内容などをまとめて書いています。

①awaitは別に必須ではない
asyncキーワードなしにawaitは書けませんが、awaitなしでasyncをつけることはできます。(MDNの言う通り、実際何も必要がないものを待ってもasync/awaitを付ける意味がないけど)

ちなみに知っての通りawaitは待ちが入るので、以下のメソッドを実行するとtest1の実行結果が出てきます。

index.js

async function test1() {
    return "hello"
}

async function test2() {
    return await "hello"
}

console.log(test1());
console.log(test2());

②asyncを付けた関数はPromiseを返す
asyncキーワードが付くとPromiseが返されるので、then()で受け取ることもできます。

index.js

async function test2() {
    return await "hello"
}

test2().then(res => console.log(res)); 

ちなみにこれは勉強しながら知ったのですが、async/awaitがよく使われる例だと大体API呼び出しとかだと思うのですが、呼び出したAPIの結果をJSONにして使うのに.json()メソッドをよく使うと思うのですが、これもPromiseを返すようです。

index.js

async function dataObj() { 
    return await fetch('https://randomuser.me/api/?gender=female')
}
        dataObj()
        .then(res => res.json()) //pending
        .then(res => console.log(res)) //実際のAPIの結果

ちなみに本来的にawaitを付けないと意味がない部分にawaitをつけないとどうなるのか。

index.js

async function fetchData() {
            try {
                const res = await fetch('https://randomuser.me/api/?gender=female').then(res => res.json())
                console.log(res) //data
            } catch(e) {
                throw new Error("failed to fetch")
            }
            
        }

        fetchData();

        async function fetchData2() {
            try {
                const res = fetch('https://randomuser.me/api/?gender=female').then(res => res.json())
                console.log(res) //pending
            } catch(e) {
                throw new Error("failed to fetch")
            }
            
        }

        fetchData2();

上のawaitを付けた方はちゃんとres変数に値が入るのですが、Promiseがfulfilledされないまま返してしまうようで、pendingの初期状態のPromiseが格納されてしまっていました。