JavaScriptの非同期処理の順序について

javascriptの非同期処理について質問です。web3.jsでコントラクトのデータを取得した後に、別の関数で取得したデータを利用したいのですが、うまく機能しません。どのように非同期処理を記述すれば良いでしょうか。なお、フレームワークはvue2を使用しており、コンポーネントのmethods内で処理を想定しています。
0. コントラクトからデータを取得するメソッド

getData:function(){
            this.Contract.methods.datas(0).call().then((data) => {
                this.obj = data.prop;
            });
        },

上記メソッドから取得したデータを利用してさらに別の関数を実行する

this.getData();
function　calc(){
   let a = this.obj * 2 //this.objがgetDataによって取得されたデータ
}
calk();

上記の記述だと、getDataのthenの処理が終わる前に、calcが処理されてしまいますが、
先にthenを処理させる記述方法を教えていただけないでしょうか。
よろしくお願います。

行動規範の内容に同意します

回答1件

ベストアンサー

データを取得するメソッドの返り値をPromiseにする。

javascript
1getData:function(){
2            return new Promise((resolve) => {
3                this.Contract.methods.datas(0).call().then((data) => {
4                    this.obj = data.prop;
5                    resolve();
6                });
7            });
8        },

async/awaitで非同期処理が終わったあとにcalc()を実行する。

javascript
1(async () => {
2    await this.getData();
3    function calc(){
4       let a = this.obj * 2 //this.objがgetDataによって取得されたデータ
5    }
6    calc();
7})();