详解如何在Vue3中与后端API进行交互

npm install -g @vue/cli

vue create my-vue-app
cd my-vue-app

<template>
  <div>
    <h1>用户列表</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <div v-else>
      加载中...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error('网络响应不是 OK');
        }
        const data = await response.json();
        this.users = data; // 将获取到的数据设置到 users
      } catch (error) {
        console.error('获取用户时出错:', error);
      }
    }
  }
};
</script>

npm install axios

<template>
  <div>
    <h1>用户列表</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <div v-else>
      加载中...
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.users = response.data; // 将获取到的数据设置到 users
      } catch (error) {
        console.error('获取用户时出错:', error);
      }
    }
  }
};
</script>

<template>
  <div>
    <h1>用户列表</h1>
    <div v-if="loading">加载中...</div>
    <div v-if="errorMsg">{{ errorMsg }}</div>
    <ul v-if="users.length && !loading">
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      loading: false,
      errorMsg: ''
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      this.errorMsg = '';
      
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.users = response.data;
      } catch (error) {
        this.errorMsg = '获取用户时出错: ' + error.message;
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>