Nuxt.js 如何处理 API 请求？

推荐答案

在 Nuxt.js 中处理 API 请求通常有以下几种方式：

1. 使用 axios 模块：Nuxt.js 官方推荐使用 @nuxtjs/axios 模块来处理 API 请求。你可以通过配置 nuxt.config.js 来全局设置 axios，并在页面或组件中使用 this.$axios 来发起请求。

2. 使用 fetch 方法：Nuxt.js 提供了 fetch 方法，可以在页面或组件中用于获取数据。fetch 方法会在服务器端渲染（SSR）时自动调用，也可以在客户端调用。

3. 使用 asyncData 方法：asyncData 是 Nuxt.js 提供的一个特殊方法，用于在页面加载之前获取数据。它会在服务器端渲染时执行，并将获取的数据合并到页面的 data 中。

4. 使用 useFetch 组合式 API：在 Nuxt.js 3 中，你可以使用 useFetch 组合式 API 来处理 API 请求。useFetch 是一个基于 fetch 的封装，提供了更简洁的 API 来处理异步数据。

本题详细解读

1. 使用 axios 模块

首先，安装 @nuxtjs/axios 模块：

npm install @nuxtjs/axios

然后在 nuxt.config.js 中配置 axios：

export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'https://api.example.com', // 设置 API 的基础 URL
  },
}

在页面或组件中使用 this.$axios 发起请求：

export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('/posts')
    return {
      posts: response.data,
    }
  },
}

2. 使用 fetch 方法

fetch 方法可以在页面或组件中直接使用：

-- -------------------- ---- -------
------ ------- -
  ------ -
    ------ -
      ------ ---
    -
  --
  ----- ------- -
    ---------- - ----- ---------------------------------- -- ---------
  --
-

3. 使用 asyncData 方法

asyncData 方法会在页面加载之前执行，并将数据合并到页面的 data 中：

export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('/posts')
    return {
      posts: response.data,
    }
  },
}

4. 使用 useFetch 组合式 API

在 Nuxt.js 3 中，你可以使用 useFetch 来处理 API 请求：

-- -------------------- ---- -------
------- ------
----- - ----- ----- - - ----- ----------------------
---------

----------
  -----
    ----
      --- ----------- -- ------ ----------------- ---------- -------
    -----
  ------
-----------

useFetch 会自动处理请求的加载状态和错误处理，使得代码更加简洁。