使用Vue3和Axios進行API數據交互的代碼實現

更新時間：2024年09月09日 09:35:47 作者：JJCTO袁龍

在現代Web開發(fā)中,前端框架和庫的使用越來越普遍,Vue.js便是其中一個受歡迎的選擇,Axios作為一個基于Promise的HTTP客戶端,能夠幫助我們輕松地與API進行交互,在這篇博客中,我將介紹如何利用Vue 3及Axios進行API數據交互,需要的朋友可以參考下

引言

在現代Web開發(fā)中，前端框架和庫的使用越來越普遍，Vue.js便是其中一個受歡迎的選擇。通過Vue 3引入的Composition API和setup語法糖，我們可以更靈活地組織代碼，并提高代碼的可讀性和可維護性。與此同時，Axios作為一個基于Promise的HTTP客戶端，能夠幫助我們輕松地與API進行交互。在這篇博客中，我將介紹如何利用Vue 3及Axios進行API數據交互，并通過示例代碼來展示其基本用法。

1. 環(huán)境準備

在開始之前，請確保你已經裝好了Node.js和npm。接下來，我們可以使用Vue CLI來創(chuàng)建一個新項目。打開終端，執(zhí)行以下命令：

npm install -g @vue/cli
vue create vue-axios-example
cd vue-axios-example
npm install axios

此時，我們已經創(chuàng)建了一個新的Vue項目并安裝了Axios模塊。

2. 組件結構

在這個示例中，我們將創(chuàng)建一個簡單的組件，該組件將從一個公共API（例如JSONPlaceholder）獲取一些數據并顯示在頁面上。我們將在src/components目錄下創(chuàng)建一個新的文件UserList.vue。

<template>
  <div>
    <h1>User List</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-else>Loading users...</p>
    <button @click="fetchUsers">Refresh Users</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'UserList',
  setup() {
    const users = ref([]);

    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    // On component mount, fetch users
    fetchUsers();

    return {
      users,
      fetchUsers
    };
  },
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

2.1 組件分析

顯示從API獲取到的用戶數據。如果數據還在加載中，會顯示“Loading users…”提示。
腳本部分：在<script>部分，我們使用setup函數。在這個函數中，我們使用ref來創(chuàng)建一個響應式變量users，并定義異步函數fetchUsers來獲取用戶數據。
1. fetchUsers函數使用Axios發(fā)送GET請求，獲取JSONPlaceholder的用戶數據。
2. users.value = response.data將獲取到的數據賦值給users。
樣式部分：<style scoped> 確保樣式只作用于當前組件。

3. 使用組件

為了在應用中使用我們的組件，我們可以在src/App.vue中進行如下修改：

<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';

export default {
  name: 'App',
  components: {
    UserList,
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

在這里，我們首先導入UserList組件，然后在模板中使用它。這樣，我們就可以在主應用程序中看到用戶列表。

4. 運行項目

到此為止，我們的項目已經準備完成?，F在，我們可以運行開發(fā)服務器，查看我們的組件效果：

npm run serve

打開瀏覽器，訪問http://localhost:8080，你將看到一個用戶列表，且下方有一個“Refresh Users”按鈕，點擊此按鈕可以重新獲取用戶數據。

5. 異常處理

在上面的fetchUsers函數中，我們已經涉及到了簡單的錯誤處理。如果在請求過程中出現任何錯誤，開發(fā)者將會看到控制臺輸出相關錯誤信息。為了進一步提升用戶體驗，我們可以在UI中增加一些錯誤提示。

修改UserList.vue中的狀態(tài)管理：

<template>
  <div>
    <h1>User List</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>Loading users...</p>
    <button @click="fetchUsers">Refresh Users</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'UserList',
  setup() {
    const users = ref([]);
    const error = ref(null);

    const fetchUsers = async () => {
      error.value = null; // 清空錯誤
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
      } catch (err) {
        error.value = 'Error fetching users: ' + err.message;
      }
    };

    fetchUsers();

    return { users, fetchUsers, error };
  },
};
</script>

在這段代碼中，我們引入了一個新的響應式變量error，用于保存錯誤信息，并在UI中進行適當的顯示。這樣，用戶在獲取數據失敗時，可以看到相關的錯誤提示。