JavascriptでAPI取得完了を待ちたい

Question

JavascriptでAPIを取得するプログラムを書いているのですが、APIの取得完了を待たずにプログラムが進んでしまい、APIのデータを計算に用いることが出来ません。
以下のようなソースコードを書きました。

let getAPI = async (token) => {
    let res = await axios.get('https://127.0.0.1:3000/api', {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    })
    return res.data
}

let sample = (token) => {
    let arr = new Array()
    getAPI(token).then((data) => {
        for (let i = 0; i < data.length; i++) {
            arr[i] = data[i]
        }
    })

    //以降、arrを使った計算
}

sample関数のgetAPI関数実行後に、arrを使って計算をしたいのですが、コールバック関数が実行される前にarrが空配列として計算されてしまいます。getAPIのコールバック関数が実行を終えるのを待ちたいのですが、どのように実装すればよいのでしょうか？

Answer 1

sample 関数もasync functionとして定義すると次のように記述することができます。
getAPI関数の結果をawaitして、 thenのコールバック関数内で行われている処理をコールバック関数の外に出しています。

let sample = async (token) => {
    let arr = new Array()
    const data = await getAPI(token)

    for (let i = 0; i < data.length; i++) {
        arr[i] = data[i]
    }

    //以降、arrを使った計算
}

sample関数の呼び出し元は適宜調整してください。