vue2、vue3 axios封装区别

### Vue2 和 Vue3 中 Axios 封装的主要差异 #### 一、Vue 版本特性影响下的封装区别 在 Vue2 中，通常通过 `Vue.prototype` 来挂载全局对象或方法。对于 Axios 的封装而言，在 main.js 文件中可能会看到如下形式的代码： ```javascript import axios from 'axios'; // 挂载到 Vue 原型上 Vue.prototype.$http = axios; ``` 这种方式使得在整个应用中的任何组件都可以直接使用 this.$http 访问 Axios 实例[^1]。 而在 Vue3 中，推荐的做法是利用 Composition API 或者插件机制来实现功能性的增强。因此，Axios 的集成更倾向于创建一个独立的服务文件并将其作为插件注册给应用程序实例，如提供的引用所示。 #### 二、插件化集成的不同之处 针对 Vue3 的特点，可以构建更加模块化的 Axios 请求工具类，并且可以通过定义 install 方法来自定义安装逻辑，从而更好地适应新的组合式API风格的应用开发模式。下面是一个简单的例子展示如何将 Axios 集成至 Vue3 应用程序中: ```typescript // src/request/axios.ts import { Plugin } from "vue"; import axios, { AxiosInstance } from "axios"; const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, }); service.interceptors.request.use( (config) => { // 处理请求前的操作... return config; }, (error) => Promise.reject(error), ); service.interceptors.response.use( (response) => response.data, (error) => Promise.reject(error), ); export default (): Plugin => ({ install(app) { app.config.globalProperties.$http = service; // 添加$http属性以便于模板访问 app.provide('httpClient', service); // 提供依赖注入服务 } }); ``` 随后，在入口文件(main.js/main.ts)里完成对该插件的加载与初始化工作： ```typescript import App from "./App.vue"; import HttpClientPlugin from "@/request/axios"; createApp(App).use(HttpClientPlugin); ``` 这种做法不仅保持了良好的解耦合度，还允许开发者根据实际需求灵活调整网络层的行为而无需修改业务逻辑部分的代码结构[^2]。 #### 三、Composition API 支持带来的变化 随着 Composition API 的引入，Vue3 用户能够更容易地管理复杂的状态以及副作用关系。当涉及到 HTTP 客户端库（比如 Axios）时，则意味着可以在 setup 函数内部轻松获取已配置好的客户端实例并通过 ref/reactive 等响应式变量传递所需的数据上下文环境给子组件使用[^3]。