如何在Vue3中使用Composition API调用自定义全局函数

你已经在main.js里把Axios挂载到全局的$http上了，要在Composition API的setup函数里调用它，有两种方式可以实现，我分别给你讲讲：

方法一：通过getCurrentInstance获取全局实例 #

这是直接对接你当前全局挂载方式的方案，你可以用Vue提供的getCurrentInstance方法拿到当前组件的实例，进而访问全局配置的$http：

<script>
import { getCurrentInstance } from 'vue';

export default {
  setup() {
    // 获取当前组件的实例对象
    const instance = getCurrentInstance();
    // 从全局属性中取出我们挂载的Axios
    const $http = instance.appContext.config.globalProperties.$http;

    // 举个例子：发起GET请求
    const fetchSomeData = async () => {
      try {
        const response = await $http.get('https://api.example.com/data');
        console.log('请求结果:', response.data);
      } catch (err) {
        console.error('请求失败:', err);
      }
    };

    return {
      fetchSomeData
    };
  }
};
</script>

不过要提一句：getCurrentInstance原本是给库开发者设计的API，在业务代码里使用虽然可行，但并不是官方最推荐的做法，因为它会让组件和全局实例产生强耦合，不利于代码的可维护性。

方法二：封装独立的Axios实例（推荐） #

更符合Composition API模块化思想的做法是，把Axios封装成一个独立的实例文件，然后在需要的组件里直接导入使用。这样组件的依赖关系更清晰，也方便统一管理拦截器、基础URL等配置：

1. 先创建一个utils/axios.js文件，封装Axios实例：

import axios from 'axios';

// 创建自定义的Axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 你的基础接口地址
  timeout: 5000 // 请求超时时间
});

// 添加请求拦截器（比如给请求头加token）
axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

// 添加响应拦截器（统一处理响应结果或错误）
axiosInstance.interceptors.response.use(
  response => response.data, // 直接返回响应体里的数据
  error => {
    console.error('接口请求出错:', error);
    // 这里可以统一处理401、500等错误状态码
    return Promise.reject(error);
  }
);

export default axiosInstance;

2. 然后在组件里直接导入使用：

<script>
import $http from '@/utils/axios';

export default {
  setup() {
    const fetchSomeData = async () => {
      try {
        const data = await $http.get('/data'); // 这里自动拼接baseURL
        console.log('请求结果:', data);
      } catch (err) {
        console.error('请求失败:', err);
      }
    };

    return {
      fetchSomeData
    };
  }
};
</script>

这种方式的优势很明显：组件不再依赖全局实例，代码的复用性和可维护性更强，而且后续如果需要修改Axios的配置，只需要在utils/axios.js里调整即可，不需要改动每个组件。

内容的提问来源于stack exchange，提问作者刘嘉琪