nosho96ohi
@nosho96ohi

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

javascript、Vue 実行順序を制御したい。

解決したいこと

function1を実行して処理が終わった後に、function2を実行させたいです。
でもなぜか2のほうが先に実行されてしまいます。なぜでしょうか。そして、どうすればよいでしょうか。
具合的には
function1はユーザーのuidと一致するfirebaseのドキュメントを削除する関数、
funation2は新しくドキュメントを追加する関数です。

自分で試したこと

save: function(){
 this.function1
 this.function2
 }
save:async function(){
  this.function1
 await this.function2
 }
save:async function(){
 this.function1.then(this.function2)
 
 }

どれもダメでした。

0

3Answer

function1, function2 は何なのですか? 関数で、正しくは以下のようになるのではないですか?

function(){
    this.function1();
    this.function2();
}

で、function1 は Promise を返す非同期メソッドではないかと想像してますが違いますか?

function の実行で、その中の function1() と function2() は同期的に実行される。つまり、同期的に順番にまず function1 が呼ばれ、function1 の完了後 function2 が呼ばれる。

ところが、function1 は Promise を返す非同期メソッドなので呼ばれると即 Promise が返され、その時点で function1 は完了とみなされて、次の function2 が呼ばれて実行される。

その後、function1 から返された Promise が処理を行うということになった結果では?

つまり以下の記事に書いてあるような話になっているとか。違いますか?

JavaScript の async / await
http://surferonwww.info/BlogEngine/post/2022/11/25/async-and-await-in-javascript.aspx

であれば、解決策は上の記事に書いてあるのと同様に、以下のようにすればいいと思いますが、いかがですか?

async function(){
    await this.function1();
    this.function2();
}

【追記】

今回の話と関係あるかどうかわかりませんが、関数内で this を使う場合は、「その this は何なのか?」ということを考えてコードを書く必要があります。

MDN ドキュメントいろいろ書いてありますが、関数内での this については「関数コンテキスト」と「アロー関数」セクションに書いてあるように "関数の呼び出し方によって異なります" ので。

this
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this

1Like

Comments

  1. @nosho96ohi

    Questioner

    ありがとうございます。参考にします!

あまり慣れていないのでご期待に添えるかわかりませんが、下記の記述ではどうでしょうか。
追記:}が一つ多かったので編集しました

save: function(){
  const promiseObj = new Promise(resolve => {
    this.function1
    resolve();
 });
promiseObj.then(() => {
  this.function2
});
0Like

Comments

  1. @nosho96ohi

    Questioner

    ありがとうございます。しかし、うまくいきませんでした、、、
    もう少しいろいろ試してみます。

function1もawaitすべきでしょうか。

save:async function(){
 await this.function1
 await this.function2
 }

だめだったら、function1と2の作りに関わるでしょうと思います。

0Like

Comments

  1. @nosho96ohi

    Questioner

    ありがとうございます。だめだったのでfunction1と2をみなおします。

Your answer might help someone💌