在 Nuxt3 中呼叫 API 示範($fetch)

之前有一篇是 useFetch 使用示範，useFetch 主要是在元件的 setup 函式中呼叫 API 使用，而其他依據使用者操作需要呼叫 API 的部分則主要是使用 $fetch 。

最簡單示範

假設有個 API 連結：http://localhost:8888/users/1 回傳結果為：{"id":1,"name":"小明"}

可以使用下面的方式呼叫：

    
const url = 'http://localhost:8888/users/1';
const response = await $fetch(url, {
  method: 'GET',
});

const json = JSON.stringify(response)
console.log(`result: ${json}`); // result: {"id":1,"name":"小明"}
    

帶入 Header:

    
const url = 'http://localhost:8888/users/1';
const response = await $fetch(url, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    "Authorization": "Bearer aaa.bbb.ccc"
  },
});
    

TypeScript 定義回傳值屬性

    
const url = 'http://localhost:8888/users/1';
const response = await $fetch<{ id: number; name: string }>(url, {
  method: 'GET',
});
    

處理失敗情況

    
const url = 'http://localhost:8888/users/1';
const response = await $fetch(url, {
  method: 'GET',
})
.then((response) => {
  console.log("取得回應: " + JSON.stringify(response));
  return response; // 不回傳的話，外面的 response 就會是 undefined
}).catch((error) => {
  console.error('發生錯誤:', error);
});
    

攔截器 - 使用非同步方式取得回應

    
const url = 'http://localhost:8888/users/1';
const response = await $fetch(url, {
  method: 'GET',
  onRequest({request}) {
    console.log(`發送請求`);
  },
  onRequestError({error}) {
    console.log(`請求出現錯誤: ${error}`);
  },
  onResponse({response}) {
    console.log(`response.status: ${response.status}`)
    console.log(`成功取得回應: ${JSON.stringify(response)}`);
  },
  onResponseError({response}) {
    console.log(`取得回應失敗`);
  },
})
    

參考資料：
Nuxt3 - $fetch
Nuxt3 - Data fetching