如何在NUXT中高效地调用REST api？(也可以在基于组件的前端框架中)

npm install axios @nuxtjs/axios

module.exports = {
  // ...
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'https://api.example.com', // 替换为你的API基本URL
    // 其他axios配置选项
  },
  // ...
}

import axios from 'axios'

const apiService = axios.create()

export default {
  async getPosts() {
    try {
      const response = await apiService.get('/posts')
      return response.data
    } catch (error) {
      console.error(error)
      throw new Error('Failed to fetch posts')
    }
  },
  // 其他API调用方法
}

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

<script>
import apiService from '~/services/apiService'

export default {
  async asyncData() {
    try {
      const posts = await apiService.getPosts()
      return { posts }
    } catch (error) {
      console.error(error)
      return { posts: [] }
    }
  },
}
</script>