Skip to main content
本文に 70 文字追加
ソース リンク
// 出力: $ call api! → 他の処理です
async function main1() {
    const res = await functionA1();
    console.log("他の処理です"res);
    console.log(res)"他の処理です";)
} 

// 出力: $ 他の処理です → call api by awaiting!
async function main2() {
    functionA2().then(res => console.log(res));
    console.log("他の処理です")
}

async function functionA1() {
   return dummyAsyncFunction("call api");
}

async function functionA2() {
    return await dummyAsyncFunction("call api by awaiting")
}

async function dummyAsyncFunction(message) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(message + "!")
        }, (1000));
    });
}
async function main1() {
    const res = await functionA1();
    console.log("他の処理です")
    console.log(res);
}

async function main2() {
    functionA2().then(res => console.log(res));
    console.log("他の処理です")
}

async function functionA1() {
   return dummyAsyncFunction("call api");
}

async function functionA2() {
    return await dummyAsyncFunction("call api by awaiting")
}

async function dummyAsyncFunction(message) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(message + "!")
        }, (1000));
    });
}
// 出力: $ call api! → 他の処理です
async function main1() {
    const res = await functionA1();
    console.log(res);
    console.log("他の処理です";)
} 

// 出力: $ 他の処理です → call api by awaiting!
async function main2() {
    functionA2().then(res => console.log(res));
    console.log("他の処理です")
}

async function functionA1() {
   return dummyAsyncFunction("call api");
}

async function functionA2() {
    return await dummyAsyncFunction("call api by awaiting")
}

async function dummyAsyncFunction(message) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(message + "!")
        }, (1000));
    });
}
ソース リンク

結論としては、awaitを必ずしも指定する必要はありません。(main1関数、main2関数でも同じ結果)

awaitasync functionに付与することで同期的に処理を書くことができます。
つまりawaitをつけることでasync functionの返り値であるPromiseの中身をそのままプログラム中に記述できるようになります。Promiseに関してはこちらをご参照ください。
これは例えばPromise<string>という返り値の関数があったときawaitを記述することでその関数の返り値をstringで扱えるようになるということです。
大雑把に言えば、非同期関数を実行するとPromiseという欲しい返り値を格納する箱が作られ、それが関数の結果として返されます。非同期関数はその名の通りいつ処理が完了するか分からない関数なのです。
なので特殊な型でラップして扱うようになっているわけです。例えばPromiseには同期できたら~するというようなメソッドthen()や、非同期処理中に失敗したら~するメソッドcatch()など非同期を扱えるようにしてくれているわけです。
同期できたら〜という文脈ではawaitを使うことができるわけです。

ただしawaitしてしまうと通常の順次実行と同じように実行の完了がない限り処理が進まないわけです。
非同期処理というのは重い処理だから非同期処理になっているという理由が多々あります(ネットワークI/O, バッチ処理など)。
なので無闇矢鱈にawaitしてしまうとその間にいろいろなことができるのに処理を止めてしまうなんてことになったりします。
というわけでそういう非同期の旨味を利用したいときにはthen()で書くと良いかと思います!

一応サンプルを記載しましたのでご確認ください!dummyAsyncFunctionは1秒後に引数の文字列の末尾に!を付け足した文字列を返す非同期関数です。

async function main1() {
    const res = await functionA1();
    console.log("他の処理です")
    console.log(res);
}

async function main2() {
    functionA2().then(res => console.log(res));
    console.log("他の処理です")
}

async function functionA1() {
   return dummyAsyncFunction("call api");
}

async function functionA2() {
    return await dummyAsyncFunction("call api by awaiting")
}

async function dummyAsyncFunction(message) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(message + "!")
        }, (1000));
    });
}