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 方法可以在页面或组件中直接使用：

// www.javascriptcn.com code example
export default {
  data() {
    return {
      posts: [],
    }
  },
  async fetch() {
    this.posts = await this.$axios.get('/posts').then(res => res.data)
  },
}

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 请求：

// www.javascriptcn.com code example
<script setup>
const { data: posts } = await useFetch('/api/posts')
</script>

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

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