Hi Dai Gei Ho~ 我是Winnie ~

在今天的文章中，我們要簡單來說說 在 Lifecycle hooks 中使用 async/await 的問題。( 可能此篇文的解釋會有點短...)

而在進入正題之前，想先讓大家先來一起 code review 下:

下方是一個 可以正常執行且無出現錯誤 的 請求資料 function (這是我初次實作練習 Vue專案的一段程式碼XD)

import { ref, onBeforeMount } from 'vue';
    //略...
    setup(){
     const newsData = ref([]);
     const fetchData = async(url,datas) => {

        const res = await fetch(url).then(res => res.json());
        await res.map( data => datas.push(data));
      }
  
      onBeforeMount(() => {
        fetchData(url, newsData.value);
      })
      //略...
    }

看完不知道大家有沒有發現哪裡有問題呢？嗯有，寫得很奇怪

答案 就是 fetchData()中的 async/await。

我猜 到這邊你可能會覺得很奇怪，可能會想說平常我也是都 使用 fetch + async/await 啊！

沒事，先別急～因為這是 在 Vue 的 生命週期 hooks 使用 async/await 才會出現的問題。

為什麼呢？

因為 在 生命週期 hooks裡 是採取同步執行的，所以在生命週期hooks中 寫async/await 也無太大意義，因為生命週期hooks 並不會等到 await 執行完，才執行下一個 週期的hooks。

另外尤雨溪 大大 也提到 生命週期 hooks是不支持 async的，為什麼呢？ 我們可以看看下圖：

以上就是針對 生命週期 hooks 與 async/await 的非常簡單說明，如有問題歡迎大家多多指教。