vue3如何封裝axios

Vue3如何封裝Axios

在現代前端開發中，Axios 是一個非常流行的 HTTP 客戶端庫，用于發送異步請求。在 Vue3 項目中，我們通常會將 Axios 進行封裝，以便更好地管理請求、統一處理錯誤、添加攔截器等。本文將介紹如何在 Vue3 中封裝 Axios，并提供一個完整的示例。

1. 安裝Axios

首先，我們需要在項目中安裝 Axios?？梢酝ㄟ^ npm 或 yarn 進行安裝：

npm install axios
# 或者
yarn add axios

2. 創建Axios實例

為了更好地管理請求，我們可以創建一個 Axios 實例，并對其進行配置。通常我們會將 Axios 實例放在一個單獨的文件中，例如 src/utils/request.js。

import axios from 'axios';

// 創建axios實例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 設置基礎URL
  timeout: 5000, // 請求超時時間
});

export default service;

3. 添加請求攔截器

在發送請求之前，我們可能需要對請求進行一些處理，例如添加 token、設置請求頭等。我們可以通過 Axios 的請求攔截器來實現。

// 請求攔截器
service.interceptors.request.use(
  (config) => {
    // 在發送請求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

4. 添加響應攔截器

在接收到響應后，我們可能需要對響應數據進行處理，例如統一處理錯誤、解析數據等。我們可以通過 Axios 的響應攔截器來實現。

// 響應攔截器
service.interceptors.response.use(
  (response) => {
    // 對響應數據做些什么
    const res = response.data;
    if (res.code !== 200) {
      // 處理業務錯誤
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  (error) => {
    // 對響應錯誤做些什么
    return Promise.reject(error);
  }
);

5. 封裝請求方法

為了更方便地使用 Axios，我們可以封裝一些常用的請求方法，例如 get、post、put、delete 等。

// 封裝get請求
export function get(url, params) {
  return service({
    url,
    method: 'get',
    params,
  });
}

// 封裝post請求
export function post(url, data) {
  return service({
    url,
    method: 'post',
    data,
  });
}

// 封裝put請求
export function put(url, data) {
  return service({
    url,
    method: 'put',
    data,
  });
}

// 封裝delete請求
export function del(url, params) {
  return service({
    url,
    method: 'delete',
    params,
  });
}

6. 在Vue3中使用封裝的Axios

在 Vue3 中，我們可以通過 provide 和 inject 來全局注入 Axios 實例，或者在組件中直接使用封裝的請求方法。

import { provide } from 'vue';
import service from '@/utils/request';

export default {
  setup() {
    provide('axios', service);
  },
};

在組件中使用：

import { inject } from 'vue';

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

    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      fetchData,
    };
  },
};

7. 總結

通過以上步驟，我們成功地在 Vue3 項目中封裝了 Axios，并實現了請求攔截器、響應攔截器以及常用的請求方法。這樣不僅提高了代碼的可維護性，還能更好地處理請求和響應中的各種情況。

在實際項目中，你可以根據需求進一步擴展和優化這個封裝，例如添加更多的請求方法、處理不同的錯誤碼、添加請求緩存等。希望本文對你有所幫助！