jsでのasync/await(またはpromise)利用時の実行順序

Question

現在下記のaction()を実行すると、
0
4
[object Promise]d
1
2
abc
3
と出力されます。
これを
0
1
2
3
4
abcd
と出力させたいのですが、
そうするには
console.log(message + 'c');の前に

console.log(3);
console.log(4);

と記述するしかないでしょうか

await action();と言う記述で
定義されたaction()内のすべての処理が終了するまで
待つという認識でした。
この認識は誤ってますでしょうか。
私の記述が悪いためこうなっているのか、
現在は
action()内のすべての処理が終了するまで
待たずにconsole.log("4");が実行されている状況です。
0
1
2
3
4
abcd
と言うように並ぶにはjavascriptの仕様として
どうするのが一番よろしいでしょうか。
どなたか教えてください。

export default class TestClass {
	async action(){
	        await new Promise(function(resolve, reject){
	            console.log(0);
	            resolve('a');
	          })
	          .then(function(message){
	            console.log(1);
	            return message + 'b';
	          })
	          .then(function(message){
	            console.log(2);
	            console.log(message + 'c');
	            return message;
	          });
	          console.log(3);
	}
}
var result = await new TestClass().action();
console.log("4");
console.log(result + "d");

Comments

[m.ts10806]

Node.jsはどのように関係しますか？

[Lhankor_Mhy]

文法エラーが出ます。

[allazward]

m.ts10806様、ありがとうございます。
ソースコードを修正致しました。
Node.jsを利用して見様見真似でビルド致しました。
そちらも関連があるかもと思い記載せて頂きました。
Lhankor_Mhy様、ご指摘ありがとうございます。
ソースコードを修正致しました。
環境等申し上げた方がよろしかったでしょうか。
node.jsはv10.16.0
またビルド時babel-loader(8.0.6)を利用しています

Answer 1

awaitは、asyncな関数の中に書くものです。全体をasyncな即時関数に入れてしまうのがいいでしょう。

(async () => {
async function action(){
        await new Promise(function(resolve, reject){
            console.log(0);
            resolve('a');
          })
          .then(function(message){
            console.log(1);
            return message + 'b';
          })
          .then(function(message){
            console.log(2);
            console.log(message + 'c');
            return message;
          });
          console.log(3);
}

var result = await action();
console.log("4");
console.log(result + "d");
})();

（なお、actionに返り値がないので最後がundefineddとなってしまうなど、まだ適切でない箇所がいくつかあります）

Comments

[maisumakun]

文法的に問題があったので、async 「function」 actionを補っています。

[allazward]

ご回答ありがとうございます。
質問欄のコードを修正致しました。
その上でご回答頂いた内容を反映するため、呼び出し側を
var result
(async () => {
var test = new TestClass();
result = await test.action();
})();

console.log(4);
console.log(result + "d");

のように修正致しました。
が結果が変わりませんでした。

[maisumakun]

asyncの外側のコードはasyncの実行を待ちません。console.log(4)などもasyncな無名関数の中に入れる必要があります。

[allazward]

ご回答ありがとうございます。
1～4と言う順序はご指摘の通りの方法、
「asyncな無名関数の中に入れる」ことで対応できました。
「actionに返り値がない」について
console.log(message + 'c');の下の行、
return message;
で返せているという認識でした。
戻り値について呼び出し元に戻せるよう
修正してみたいと思います。また後程報告させて頂きたいと思います。

[allazward]

この度は色々とご教示下さりありがとうございました。
今後の参考にさせて頂きたいと思います。
action()の戻り値に関しては最後の.then()の中で
戻り値用の変数に設定し返却する方針を取りました。

Answer 2

処理的にはこうじゃないですかね？

const action=async()=>{
  var res=await new Promise(resolve=>{
    console.log(0);
    return resolve("a");
  }).then(message=>{
    console.log(1);
    return message + 'b';
  }).then(message=>{
    console.log(2);
    return message+'c';
  });
  console.log(3);
  return res;
}

(async()=>{
  var res="";
  await action().then(ret=>{res=ret});
  console.log("4");
  console.log(res + "d");
})();

Comments

[allazward]

yambejp様、ありがとうございます。

var ret;
await new Promise(function(resolve, reject){ ・・・

として最後の
}).then(message=>{}
の中で
ret = message として
最後にretを返すという方針で記述していたところでしたが、
ご回答頂いたコード中、
var resに
}).then(message=>{}
内の最後にreturnされたものが格納され、それを返す
と言う認識でよろしいでしょうか、その方法がスマートなようなので
そのようにしてみたいと思います。
ありがとうございました。
頂いたコードの中で、
await action().then(ret=>{res=ret});
について特に後半部分で何をしているかがわかりませんでした。
ret=>{res=ret}の部分ですが、
ここを日本語に翻訳して頂けないでしょうか。

[yambejp]

actionはasyncを宣言した関数なのでpromiseを返します
戻ってくるのが”abc”という文字列なので
var resで一時的につくっておいた変数にデータが投入され
後から参照できます

[allazward]

ありがとうございます。
最後にもう一度確認させてください
(async()=>{})();
の後に記述した処理は
(async()=>{})();の処理の完了を待たずに進行し
(async()=>{})();の完了を待って処理を行うには
(async()=>{ 処理A })();
上記の処理Aのように記述するしかない、という認識でよろしいでしょうか。

[yambejp]

> (async()=>{})();
> の後に記述した処理は
> (async()=>{})();の処理の完了を待たずに進行

そうですね
(async()=>{
await console.log("1");
await console.log("2");
})();
console.log("3");
//出力1→3→2
になったりします

[allazward]

この度はありがとうございます。今後の参考にさせて頂きます。