DAY11: Nuxt.js 中的 API 請求和資料處理

進行 API 請求

// 在頁面或組件中進行 API 請求

export default {
  async asyncData({ params }) {
    const response = await fetch(`https://api.example.com/data/${params.id}`);
    const data = await response.json();

    return {
      apiData: data,
    };
  },
};

我們使用 asyncData 方法執行了一個 API 請求，並將從 API 獲取的資料存儲在 apiData 中。

資料處理和渲染

<!-- 在組件模板中渲染 API 資料 -->

<template>
  <div>
    <h1>{{ apiData.title }}</h1>
    <p>{{ apiData.description }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const response = await fetch(`https://api.example.com/data/${params.id}`);
    const data = await response.json();

    return {
      apiData: data,
    };
  },
};
</script>

在這個示例中，我們在組件模板中使用 apiData 中的資料進行渲染，顯示標題和描述。

錯誤處理

// 錯誤處理

export default {
  async asyncData({ params }) {
    try {
      const response = await fetch(`https://api.example.com/data/${params.id}`);
      if (!response.ok) {
        throw new Error('API 請求失敗');
      }
      const data = await response.json();

      return {
        apiData: data,
      };
    } catch (error) {
      console.error('API 請求錯誤：', error);
      return {
        apiData: null,
      };
    }
  },
};

我們使用 try...catch 來捕獲 API 請求可能出現的錯誤，並在控制台中記錄錯誤訊息。