Vue3與Axios結合實現異步請求數據功能

一、Vue3及Axios的介紹

Vue3是一個輕量、高效、可復用的前端框架，可用於構建複雜的Web應用程序。Vue3使用現代的JavaScript語法編寫，提供了許多常見的前端特性，包括組件化、狀態管理、路由、雙向綁定等等。Axios是一個流行的JavaScript庫，可用於從瀏覽器中簡單、快速地執行HTTP請求。Axios還可以處理請求失敗、超時、重試等情況，並支持攔截器和取消請求等高級功能。

在Vue3中，我們可以將Axios與其它第三方庫集成到自己的應用程序中，以便實現異步數據請求和響應等功能。

二、Vue3與Axios整合

為了在Vue3中使用Axios，我們需要先使用npm或yarn等軟件包管理器來安裝Axios庫。可以在命令行中運行以下命令來完成此操作：

nmp install axios

或

yarn add axios

安裝完成之後，我們可以將Axios庫導入到我們的Vue3應用程序中，並將其添加到全局Vue對象的原型鏈上。通過在Vue3中添加Axios的全局原型，我們可以在整個應用程序中輕鬆地訪問Axios功能。以下是如何在Vue3應用程序中添加Axios的全局原型的代碼：

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);
app.provide('axios', axios);
app.mount('#app');

在應用程序的組件中，我們可以使用inject選項來訪問Axios庫，並輕鬆地發送異步請求。以下是如何在Vue3組件中使用inject選項來訪問Axios庫並異步請求數據的代碼示例：

import { defineComponent, inject } from 'vue';

export default defineComponent({
  setup() {
    const axios = inject('axios');

    async function fetchData() {
      try {
        const response = await axios.get('/api/users');
        const data = response.data;
        // 數據處理邏輯
      } catch (error) {
        console.error(error);
      }
    }

    return {
      fetchData,
    };
  },
});

三、異步請求數據功能的實現

在Vue3中實現異步請求數據並將其顯示在頁面上的最簡單方法是使用Axios的get、post、put或delete方法向服務器發送請求，並使用Vue3的雙向綁定功能將響應數據綁定到組件的數據屬性上。以下是如何在Vue3中使用Axios和雙向綁定來實現異步請求數據功能的示例：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
  import { defineComponent, inject, ref } from 'vue';

  export default defineComponent({
    setup() {
      const axios = inject('axios');
      const users = ref([]);

      async function fetchUsers() {
        try {
          const response = await axios.get('/api/users');
          users.value = response.data;
        } catch (error) {
          console.error(error);
        }
      }

      fetchUsers();

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

四、使用Axios的攔截器實現全局請求、響應統一處理

我們也可以通過使用Axios的攔截器來實現全局請求和響應的統一處理。添加Axios的攔截器可以讓我們在執行Axios請求和響應時，攔截和修改這些請求和響應，以實現自定義的處理邏輯。以下是如何在Vue3中使用Axios攔截器來實現全局請求和響應統一處理的代碼示例：

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

axios.interceptors.request.use((config) => {
  // 在請求被發送之前做些什麼
  config.headers.Authorization = `Bearer ${localStorage.getItem('userToken')}`;
  return config;
}, (error) => {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  // 對響應數據做點什麼
  return response;
}, (error) => {
  // 對響應錯誤做點什麼
  return Promise.reject(error);
});

app.provide('axios', axios);
app.mount('#app');

在以上示例中，我們在Axios請求和響應上添加攔截器，並在發送請求和接收響應時進行自定義邏輯的處理。例如，在上述代碼中，我們在請求發送到服務器之前向請求頭添加了一個Authorization令牌，以便進行身份驗證，同時也做了一些錯誤處理邏輯，以處理請求和響應時發生的錯誤。

五、使用Axios進行文件上傳

最後，我們可以使用Axios來實現文件上傳功能。Axios提供了一種簡單、快速且可靠的方式來上傳文件，而無需使用多個庫和插件。以下是如何在Vue3中使用Axios來實現文件上傳的示例：

<template>
  <div>
    <label for="file-upload">選擇文件</label>
    <input id="file-upload" type="file" v-on:change="uploadFile" />
  </div>
</template>

<script>
  import { defineComponent, inject } from 'vue';

  export default defineComponent({
    setup() {
      const axios = inject('axios');

      function uploadFile(event) {
        const file = event.target.files[0];
        const formData = new FormData();
        formData.append('file', file);

        axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        }).then(() => {
          console.log('文件上傳成功！');
        }).catch((error) => {
          console.error(error);
        });
      }

      return {
        uploadFile,
      };
    },
  });
</script>

在以上示例中，我們創建了一個文件上傳輸入框，並在其改變時使用Axios來上傳文件。我們使用FormData對象將文件添加到請求中，並設置Content-Type標頭為multipart/form-data，以便告知服務器以此方式解析請求。最後，我們處理上傳成功或失敗時的相應邏輯。