---
# System prepended metadata

title: 生命週期 asyncData
tags: [Mike課程]

---

---
tags:  Mike課程
---

# 生命週期 asyncData

## ==撈取資料==
利用
```javascript=
 async asyncData() {
    const res = await axios.get(
      "https://vue-lessons-api.herokuapp.com/photo/list"
    );
    console.log("res", res);
    return { res: res.data };
  },

```
nuxt log 顯示的狀態
![](https://i.imgur.com/P05MlAP.png)

渲染至畫面
```htmlembedded=
<img v-for="item in res" :key="item.url" :src="item.url" alt="" />
```
components 資料夾中所有程式都無法執行 asyncData，只有在pages這檔案中才可以使用

asyncData因為執行的環境是server不是windows所以基本上
alert this document 都無法使用