【Javascript】処理に順番をつけたいです。

Question

javascriptでhtmlのフォームをリセットするための処理を実装しようとしています。
フォームのデータの送信が完了したら、フォームにリセットをかけるように動かしたいのですが、これですと、.thenや.catchの処理が終わる前に先に下のif文に行ってしまうようで、うまく判定が行えません。
javascriptは非同期処理ということは調べてわかったのですが、その上で、きちんと処理に順番をつけるにはどうすればいいでしょうか。

（前提：submitボタン、resetボタンは都合上使えないので、送信とリセットはコードで処理を行いたいです。このコードの時点でエラーは起きていません。）

var flg = 0;

//中略

answer.save()
    .then(function() {
          // 保存完了後に実行される
          alert("データを送信しました。");
          flg = 1;
          })
    .catch(function() {
           // エラー時に実行される
           alert("データの送信に失敗しました。");
           flg = 1;
           });
    
    if(flg == 1){
        Form.reset("form");
    }else{
        alert("まだリセットできないよ");
    };

Answer 1

処理順ては
1.answer.save()関数が実行
2.thenに通信終了後に実行する関数を登録
3.catchに通信エラー発生時に実行する関数を登録
4.if文実行
(ブラウザーが裏で通信)
6.通信結果によりthen(catch)で登録した関数実行

の順で実行されます。

thenに渡している関数は、通信完了後に実行されますので
if文の段階でflgが1になる事はないです。

通信完了後にリセットしたいのであれば、thenに渡している関数でリセット処理を行えばよいでしょう。

Answer 2

なんらかのモジュールを使っていると思いますので、詳細が分からないのですが、これではダメなんでしょうか。

answer.save()
    .then(function() {
          // 保存完了後に実行される
          alert("データを送信しました。");
          Form.reset("form");;
          })
    .catch(function() {
           // エラー時に実行される
           alert("データの送信に失敗しました。");
           Form.reset("form");;
           });

Comments

[mk_]

回答ありがとうございます。あるモジュールを使っているのですが、この.thenの中にリセット処理を書くとエラーがおきてしまうのです・・・
なので.then .catchの外に処理をかけるといいのですが、不可能でしょうか・・・

Answer 3

こんな風に書けそう（未検証）。

var flg = 0;
//中略
answer.save()
	.then( function() {
			// 保存完了後に実行される
			alert("データを送信しました。");
			flg = 1;
		} )
	.catch( function() {
			// エラー時に実行される
			alert("データの送信に失敗しました。");
			flg = 1;
		} )
	.then( function() {
			if(flg == 1){
				Form.reset("form");
			}else{
				alert("まだリセットできないよ");
			};
		} );

【今更ながらNode.jsでPromiseの使用例 - エンタープライズIT系エンジニアのぼやっきー】
http://junmt.hatenablog.com/entry/2015/12/11/171045