JavaScriptのPromiseとAsyncについての質問

Question

Qiitaの以下の記事を読みながらAsyncについて学習していました。
https://qiita.com/toshihirock/items/e49b66f8685a8510bd76

記事の中ではこのようなコードが登場します。

function sampleResolve(value) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(value);
    }, 2000);
  });
}

function sampleResolve2(value) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(value * 2);
    }, 1000);
  });
}

async function sample() {
  const [a, b] = await Promise.all([sampleResolve(5), sampleResolve(10)]);
  const c = await sampleResolve2(b);

  return [a, b, c];
}

sample().then(([a, b, c]) => {
  console.log(a, b, c); // => 5 10 20
});

そこで疑問です。
sampleResolve関数とsampleResolve2関数はPremise型を返す関数として定義されていますが、この二つの関数をAsyncで書き直すことはできるのでしょうか？

以下は上手く動作しませんがこのようなイメージです^^;

function sampleResolve(value) {
  async = () => {
    setTimeout(() => {
      return(value);
    }, 2000);
  }
}

初心者の私からするとAsyncとPromiseが入り混じっていてどちらかに統一したい気持ちになります。私自身の理解が浅く申し訳ありませんが、ご教授いただけますと幸いです。

Answer 1

意図は

『setTimeout を使って、async 関数を止めたい』

だと思っています。

sampleResolve 関数と sampleResolve2 関数は
Premise 型を返す関数として定義されていますが、
この二つの関数をAsyncで書き直すことはできるのでしょうか？

結論

残念ながら、できません。

理由

setTimeout は Promise 型のオブジェクトを返さないからです。

async 関数は、await 文を使って止めることができます（処理が完了するのを待つことができます）。
なぜなら async 関数は Promise 型のオブジェクトを返してくれるからです。

ここで大事なのは
await 文で止めることができるのは Promise 型のオブジェクトだけ
だと言うことです。

問題

①

setTimeout 関数が返すオブジェクトの型は、次のうちどれですか？

1. Undefined 型のオブジェクト
2. Promise 型のオブジェクト
3. Number 型のオブジェクト

②

以下のコードをコンソールにコピペして実行したとき...

async function main() {
  let start, end
  
  start = Date.now()
  await f()
  end = Date.now()
  console.log(end - start)  // <--- 実行結果 1

  start = Date.now()
  await g()
  end = Date.now()
  console.log(end - start)  // <--- 実行結果 2
}

async function f() {
  await sleep(1000)
  await sleep(1000)
  await sleep(1000)
}

async function g() {
  const promise0 = sleep(1000);
  const promise1 = sleep(1000);
  const promise2 = sleep(1000);
  await promise0;
  await promise1;
  await promise2;
}

function sleep(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

main()

• [Javascript] async, await を使った非同期処理入門まとめ

console.log の実行結果 1, 2 に表示される組み合わせとして
もっとも近いものは、次のうちどれですか？
なお表示される結果は完全には、一致しません。だいたいの値です。

選択肢	実行結果 1	実行結果 2
1	1000	1000
2	1000	3000
3	3000	1000
4	3000	3000

解答

①

正解は 3 番です。
setTimeout は Promise 型のオブジェクトを返しません。
なので await 文で止めることができません。

const type = (object) => Object.prototype.toString.call(object).slice(8, -1)
type(setTimeout(()=>{}, 0))

> type(setTimeout(()=>{}, 0))
"Number"
>

②

正解は 3 番です。

補足

① Promise は setTimeout で主に使い、他ではあまり使わない

らしいです。以下の記事がとても勉強になります。

ただ、new Promise(...)と、Promiseの前にnewを付ける書き方も、
最後にコールバックを受け取る関数以外（setTimeoutとか）を扱う以外は
基本的に使うことはほとんどないでしょう。
イマドキのJavaScriptの書き方2018 - Qiita

② sleep の実装

async 関数を止める sleep させるような処理を以下のような具合で書けるらしいです。
個人的に勉強になったので付記しておきます。

const sleep = () => new Promise(resolve => setTimeout(resolve, 3000))

• awaitできるsetTimeoutを1行で書く方法 - Qiita

まとめ

async 関数の中で、非同期処理を途中で止めることができるのは await 文だけです。
await 文で、止められるのは Promise 型のオブジェクトだけです。

setTimeout は
Promise 型のオブジェクトを返さず Number 型のオブジェクトを返します。
そのため await 文で処理を止めることができず、突き抜けていってしまいます。

Comments

[tailer]

わかりやすく解説していただきありがとうございました。大変勉強になりました。

[miyabi_pudding]

横槍すみません。
setTimeoutが返すのはundefinedではありません。

https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

ブラウザにおいては、
timeoutID（一意のnumber型の値）を返します。
Node.jsでは別のものを返すようで、プラットホームによって違うようですが、undefinedを返す環境はないかと思います。
これは、crearTimeoutを実行する際に返ってきた値を引数にいれ、止めたいsetTimeoutを特定するためでしょう。

[nico25]

ご指摘いただき、なぜそのようになっているのかまで教えていただき、ありがとうございます。
早々にさせて修正させていただきます。

Answer 2

sampleResolve関数とsampleResolve2関数はPremise型を返す関数として定義されていますが、この二つの関数をAsyncで書き直すことはできるのでしょうか？

できません。
書き直しできるかどうかを見極めるポイントは、関数を抜けるタイミングです。

Promiseの定義を略記できる構文が async 関数ではありますが、関数の実装によっては略記できないケースもあり、ご質問の2つの関数が正にそのケースに該当します。

asyncFunction は throw せずに関数を抜けると resolve() が実行されたものとして Promise の結果を返します。

sampleResolve(), sampleResolve2() では、ともに setTimeout の第一引数に与えられた関数よって resolve() されるので、関数を抜けても待つ必要があります。

これを asyncFunction に書き換えたら、

• 意図したsetTimeout内の resolve() が実行される前に、
• asyncFunctionを終えて return される（意図しない）値で resolve() が実行されます。

---

略記できるメリットは、Promiseによるフロー制御を活用した NodeJS のミドルウェアフレームワーク（KoaJS）が参考になります。

• koa/../application.js
• koa-compose.js

---

追記）

このようなイメージです^^;

の次に記述されているコードは丁度 sleep 関数であろうと察します。
nico25 さんの回答を参考にしてください。
ごめんなさい。勘違いでした。

Comments

[tailer]

> 書き直しできるかどうかを見極めるポイントは、関数を抜けるタイミングです。
この説明で納得できました。感謝いたします。

[sasnight]

高評価しました。これはより正確な説明だと思います。

Answer 3

初心者の私からするとAsyncとPromiseが入り混じっていてどちらかに統一したい気持ちになります。

残念ながら、もともとPromiseを返さない処理をasync-awaitに乗せるには、いったんPromiseを作成するプロセスを経る必要があります。

Answer 4

ちょっと何をしたいかわかりません
async指定するとpromiseを返すことはご理解されていますか？
逆にasyncしてもリゾルバが実行されないと処理が続かない場合あります。
setTimeoutはawaitで止められないので結局promiseでリゾルバを発行することになります

const sampleResolve=async value=>{
   await new Promise(resolve=>{
     setTimeout(() => {
       resolve();
     }, 2000);
  });
  return value
};

const sampleResolve2=async value=>{
  await new Promise(resolve=>{
    setTimeout(() => {
      resolve();
    }, 1000);
  });
  return value * 2;
}

const sample=async()=>{
  const [a, b] = await Promise.all([sampleResolve(5), sampleResolve(10)]);
  const c = await sampleResolve2(b);

  return [a, b, c];
}

sample().then(([a, b, c]) => {
  console.log(a, b, c); // => 5 10 20
});