Vue2项目迁移至Vue3后，原有基于vue-axios的API服务如何适配调整？

不需要导出main入口的app实例，该方式容易引发循环引用问题，更推荐直接封装独立的axios实例，完全解耦Vue实例依赖，修改方式如下：

1. 改造ApiService封装代码 #

直接创建独立axios实例替换原有的Vue.axios调用，改造后代码：

import axios from "axios";
import JwtService from "@/common/jwt.service";
import { API_URL } from "@/common/config";

// 新建独立axios实例，不依赖Vue实例
const axiosInstance = axios.create({
  baseURL: API_URL
})

const ApiService = {
    init() {
        // 可在此处添加全局拦截器等自定义配置
    },

    setHeader() {
        axiosInstance.defaults.headers.common[
            "Authorization"
        ] = `Bearer ${JwtService.getToken()}`;
    },

    query(resource, params) {
        return axiosInstance.get(resource, params).catch(error => {
            throw new Error(`[RWV] ApiService ${error}`);
        });
    },
    // 剩余的post/put/delete等方法统一将原Vue.axios替换为axiosInstance即可
    // ...
}

export default ApiService

2. 全局挂载（可选，保留原Vue2调用习惯） #

如果需要和Vue2一样在组件内通过this调用相关方法，可在main.js中挂载到Vue3全局属性：

import { createApp } from 'vue'
import App from './App.vue'
import ApiService from '@/common/api.service'

const app = createApp(App)

// 挂载全局属性，替代Vue2的Vue.prototype绑定
app.config.globalProperties.$api = ApiService

// 初始化ApiService
ApiService.init()
// 按需调用setHeader设置授权头
ApiService.setHeader()

app.mount('#app')

3. 组件内调用方式 #

• 选项式API组件：和Vue2用法完全一致，直接调用this.$api.query()即可
• 组合式API组件：通过getCurrentInstance获取全局属性

import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
// 调用ApiService方法
proxy.$api.query('/user/list', { params: { page: 1 } })

内容的提问来源于stack exchange，提问作者Harm