【 JavaScript 】Async/awaitとpromiseの非同期処理で詰まった話

初投稿です。忘備録としてQiitaに投稿します。

VueとLIFFでLINEからuser_idを取得し、user_idをHTTPパラメータとしてaxiosでHTTPS通信を行おうとしたのですが、詰まったので記録として残しておきます。
##起きた問題
user_idをパラメータとして入力しているはずなのに、パラメータ部がundefinedとなっていて通信できない。

##promiseでの非同期処理コード

created(){
  liff.init({ liffId: this.myLiffId }).then(() => {
    ・・・
   }

  liff.getProfile().then((response) => {
    ・・・
  }
}

（汚いコードですいません）
クソ雑魚プログラマの自分にはなぜうまく行かないか分からなかったのですが、先輩に聞いたところthenでPromiseチェーンを作った場合、
同期的処理になるのはPromiseチェーンの中だけで、外部は非同期的に処理されるらしいです。
(ここもあまり理解できていないので間違っていた場合はご指摘ください)

そのため、vueのtemplete内の処理は非同期的に処理されるため、user_idがまだ取得されていない状態でtemplete処理が起こるようです。

##解決法
Promiseチェーンではなく、async/awaitではuser_idが取得されてからtemplete処理が行われるようになるため、async/awaitで非同期処理を行います。

##async/awaitでの非同期処理コード

async created() {
  await liff.init({ liffId: this.myLiffId });
    ・・・
  await liff.getProfile().then((response) => {
    ・・・
    });

user_idが取得されてからHTTPSリクエストが行われるようになりました。
Vueは専門ではないのに解決策を提示していただいた先輩には頭が上がりません。

##参考にさせていただいた記事

• async/await、promise・・これが最後の「JavaScriptの非同期処理完全に理解した」
• 【 Vue.js 】Async/awaitとaxiosによる非同期処理