promise await async について

Question

function resolveSomeAfterSeconds() {
    let time = 10000 * Math.random()
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(time)
        }, time)
    })
}

async function sum(x) {
    const a = await resolveSomeAfterSeconds()
    const b = await resolveSomeAfterSeconds()
    const c = await resolveSomeAfterSeconds()
    const d = await resolveSomeAfterSeconds()

    return a + b + c + d
}

sum(10).then(function(v) { console.log(v) })

上記コードが理解できません。
まずawaitというプレフィックスを使わずに、resolveSomeAfterSecondsを呼んだ場合、promoseオブジェクト?が返ってきますよね。
だから .then とかを使うことができる。
でも、awaitを使うと非同期処理が終わるのを待ってから次の行に行くだけでなく、resolve(time)のtimeが返ってくるのでしょうか。
console.logで確かめた時そうなってました。
そして、もしそうなら、 return a + b + c + d ここの部分は具体的な数値になるから

sum(10).then(function(v) { console.log(v) })

みたいなふうに .then を使えないと思うのですが、ここでは一体何が起こってるのでしょうか。

Answer 1

async/awaitは単なる糖衣構文です。
質問文のsum構文は内部的にはだいたい下記のようなコードとして取り扱われます。

// const使ってるんだからアロー関数も使わせてね
// 引数xは使ってないので慣習として_で受けると良い
const sum = _ => new Promise((resolve, reject) => {
  resolveSomeAfterSeconds().then(result => {
    const a = result;
    resolveSomeAfterSeconds().then(result => {
      const b = result;
      resolveSomeAfterSeconds().then(result => {
        const c = result;
        resolveSomeAfterSeconds().then(result => {
          const d = result;
          resolve(a + b + c + d);
        })
      })
    })
  })
})

まず、async関数を宣言した時点で関数の中身がまるっとnew Promise((resolve, reject) => {もともと書いてた関数})で覆われます。
returnはresolve関数の発火、throwはreject関数の発火として取り扱われます。

awaitの右辺はPromise以外の値ならばそれをそのまま戻り値として取得しますが、
Promiseならば.then(以降の全ての処理を関数に包む)ものとして取り扱います。
resolve関数自体は複数の引数に対応していますが、awaitで帰ってくるのは第一引数の値１個だけです。

try-catch構文を使ったら.catch(catch内のコードを関数化)したものとして取り扱います。
これもrejectの第一引数がcatch (e) {}のeに入ってきます。

よくできてますね。

Comments

[退会済みユーザー]

asyncを使ったことによって

sum関数はnew Promiseに覆われる
覆われた中の関数のreturnは 覆ったPromiseのresolve関数の発火 になる...。
なんとなく分かってきたような気がします。
ありとうございます。

Answer 2

でも、awaitを使うと非同期処理が終わるのを待ってから次の行に行くだけでなく、resolve(time)のtimeが返ってくるのでしょうか。

はい、関数内部ではそのように処理が進みます。

ただし、もちろんawaitの結果を単純に「待つ」ことはできないので、内部的にはPromiseを使って処理しています。結果、async関数はPromiseを返します。なので、返り値を.thenで処理できます。

Comments

[退会済みユーザー]

回答ありがとうございます。
sum関数でpromiseが返ってくるのは

async

というプレフィックスをsum
関数に宣言したからでしょうか

[maisumakun]

はい、async関数はPromiseを返す関数として処理されます。

[退会済みユーザー]

上の回答者様の回答を読み返して、asyncを使ったことによって"new Promiseで覆われる"ということで少し理解できました... 。

[退会済みユーザー]

なるほどです、ありがとうございます。