iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 28

Day_28:讓 Vite 來開啟你的Vue之 跌入深坑_生命週期 hooks 與 async/await

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 的非常簡單說明,如有問題歡迎大家多多指教。

-- 無聊小記事 --

今天 是文章倒數第二天..不知道為什麼心情有點起伏..

可能是 發現 平常最沒堅持力 的自己 也可以做到...

雖然文章寫得不像他人一樣這麼精彩(有點心虛、還有點水,錯誤也有點多XD)

但在參加這活動的過程中,我每天都覺得好像又跨出自己舒適圈的一小步了..

果然還是那句話 『多數的恐懼都還是自己想像出來的,不做永遠不知道自己可以』

今天聽的是 好樂團 他們說我是沒有用的年輕人...


上一篇
Day_27:讓 Vite 來開啟你的Vue之 跌入深坑偶像劇_ v-if & v-for 他倆不能在一起啊
下一篇
Day_29:讓 Vite 來開啟你的Vue之 跌入深坑_ Suspense非同步元件(續上集)
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

1 則留言

0
Kuro Hsu
iT邦新手 3 級 ‧ 2021-10-11 01:27:17

有個例外是使用 suspense 大法可以讓你的 setup 掛上 async

Winnie Wu iT邦新手 5 級 ‧ 2021-10-11 11:52:13 檢舉

哦哦了解~萬分感謝Kuro大大的補充,我會再寫一篇來補齊的XD

我要留言

立即登入留言