Vue 3 封装 axios的两种方式

Vue 3 封装 axios的两种方式

1. 通过插件形式封装 Axios

首先，创建一个名为 axios.js的文件，并在其中引入 Axios 和 Vue：

import axios from 'axios';
import { reactive } from 'vue';

const axiosInstance = axios.create({
  // 在这里配置 Axios 实例的基本设置
});

// 创建一个 Vue 插件
const AxiosPlugin = {
  install(app) {
  	app.config.globalProperties.$axios = axiosInstance
  	// 或者是
    app.provide('$axios', axiosInstance);
  }
};

export default AxiosPlugin;

然后，在主入口文件（例如 main.js）中注册插件：

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

const app = createApp(App);

// 注册 Axios 插件
app.use(AxiosPlugin);

app.mount('#app');

• 如果是通过全局属性挂载来声明axios，在template中可以直接使用$axios,在setup()中需要获取当前组件实例

let internalInstance = getCurrentInstance() as any
const $axios = internalInstance.appContext.config.globalProperties.$axios

• 如果是通过provide方式声明，在组件中需要通过inject注入来获得axios

const $axios = inject('$axios')

自定义函数形式封装 Axios：

import axios from 'axios';

const baseURL = 'https://api.example.com'; // 根据实际情况设置基本URL

const axiosInstance = axios.create({
  baseURL,
  // 在这里配置 Axios 实例的其他设置
});

export async function request(config) {
  try {
    const response = await axiosInstance.request(config);
    return response.data;
  } catch (error) {
    // 处理错误
    throw error;
  }
}

然后，在需要使用 Axios 的组件中导入并调用封装的函数：

import { request } from './api.js';

export default {
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const data = await request({
          method: 'get',
          url: '/data',
        });
        // 处理获取的数据
      } catch (error) {
        // 处理错误
      }
    },
  },
};

使用自定义函数封装 Axios，可以更灵活地处理请求和错误，并将请求的逻辑与组件解耦。

以上是常见的两种封装 Axios 的方式，在实际项目中可以根据需求选择适合的方式来封装和使用 Axios。