DAY 28 - Nuxt 使用 useFetch 串接 API

前言

延續上篇 ...
DAY 27 - Nuxt Server 模擬 RESTful API

在上篇我們了解了Nuxt 內建 Server，採用了 Nitro 伺服器開箱即用，在不同目錄下模擬的 API 路由也不同 ，在開發時可以模擬規格進行開發，並且我們在中間也可以建立不同 HTTP Method API，接著這篇我們先了解 Nuxt 數據獲得方法及差異，在嘗試建立一個不同 HTTP Method 方法，然後使用 useFetch 串接，嘗試看看吧！

Nuxt 數據獲得方法

圖片引用自API是什麼？淺談API概念與運用案例
想了解 API 概念也可以查看此篇

一般早期我們會使用 JavaScript AJAX 串接 API > 取得 DATA 資料
AJAX (Asynchronous JavaScript and XML)

1. 建立 XMLHttpRequest
2. 開啟請求
3. 送出請求
4. 拿到回應(DATA)

會長類似下方程式碼，可以看到看起來十分複雜沒那麼直覺，所以我們就會使用套件像是 jQuery、AXIOS 來進行串接，但是這些都是奠定在 AJAX 基礎上面。

const ajaxFunc = ()=>{
    // 以 XMLHttpRequest 物件的方法抓取資料
    xhr = new XMLHttpRequest()
    // 開啟一個請求，這裡使用 GET，true 為非同步的意思
    xhr.open('GET',apiUrl, true)
    // 送出請求
    xhr.send()

    xhr.onload = function () {
        if(xhr.status === 200){
            let data = JSON.parse(this.responseText)
            console.log(data)
            let user = data.results[0]
            name = `${user.name.first} ${user.name.last}`
            img = user.picture.large
            email = user.email
            show.innerHTML = `<h3>${name}</h3>
                <img src=${img}>
                <p>${email}</p>`
        }else{
            console.error(error)
        }
    }
}

find.addEventListener('click',()=>{
    ajaxFunc()
})

而 Nuxt 內建方法 useFetch , useLazyFetch , useAsyncData 和 useLazyAsyncData來處理應用程序中的數據獲得，無須額外再安裝套件，在官方的文件裡也有提供詳細的用法。

Nuxt 數據獲得
useAsyncData
useFetch

$fetch、useFetch、useAsyncData 了解差異

Nuxt 裡常用的串接方法有 :

• $fetch - 全域使用、內建函式
• useAsyncData - composables 組合函數
• useFetch - composables 組合函數

$fetch

<script>
export default defineNuxtComponent({
  fetchKey: 'hello',
  async asyncData () {
    return {
      hello: await $fetch('/api/hello')
    }
  }
})
</script>

如不熟悉範圍，建議使用 useFetch 或是 useAsyncData
使用 setup function 時不要使用 $fetch ，API 會在伺服器、客戶端各請求一次，此時可以使用 useFetch 或是useAsyncData + $fetch

useAsyncData

<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>

<template>
  Page visits: {{ data }}
</template>

useFetch

<script setup>
const { data: count } = await useFetch('/api/count')
</script>
<template>
  Page visits: {{ count }}
</template>

useAsyncData + $fetch 合體版，寫法更優雅、簡潔好看

推薦這兩篇文章，我也是看了才更了解使用情境及用途

• Nuxt.js 3.x Data fetching 串接 API－$fetch、useAsyncData、useFetch
• Nuxt 3 發送 API 請求資料 - 從 $fetch 與 useAsyncData 到 useFetch

幫大家總結一下:

• $fetch 全域使用，不要在 setup function 下使用
• useAsyncData 要搭配 $fetch 使用
• useFetch = useAsyncData + $fetch
• 使用 setup function - 可使用 useFetch 、useAsyncData + $fetch

嘗試看看建立 Nuxt Server API > useFetch 串接 API

建立 Get、post 方法在 server/api 目錄下

我們先建立 api， 然後用 Nuxt 方法 useFetch 串接資料

首先在 server/api 資料夾 下建立一個 Get 、Post 方法，server/api/test.get.ts

//輸入指令
npx nuxi add api test.post
npx nuxi add api test.get 

此時目錄會長這樣，會看到成功建立 Get 、Post 兩種 HTTP 方法

api 內容如下 :
api/test.get.ts

//建立 get 方法
export default defineEventHandler((event) => {
  return "Hello test.get";
});

api/test.post.ts

//建立 post 方法
export default defineEventHandler((event) => {
  return "Hello test.post";
});

創建一個 test api ，並成功建立 get、post 方法 !!

使用 useFetch 串接 API

接著下一步使用 useFetch 串接剛剛建立的 API
串接 api 路由

http://localhost:3000/api/test

測試看看
使用 await useFetch 方法來串接

<!-- app.vue -->
<template>
  <div>
    <div >
     <!-- 渲染 test  -->
      {{ test }}
    </div>
  </div>
</template>

<script setup>
//await $fetch 方法 串接test 
const test = await useFetch("/api/test");
</script>

成功!!

View 顯示畫面
成功秀出 Hello test.get

以上程式碼放在教學範本，有不清楚得可以查看範本

教學範本:

• Github - nuxt3-eslint