从入门到深入，手把手教你在 Vue 3 中正确使用 Axios，支持全局挂载、局部分离、使用 proxy 连接场景，适合所有前端小白和实战设计。
大家好，我是石小石！一个热爱技术分享的开源社区贡献者，小册《油猴脚本实战指南》作者、CSDN专栏《Vite极速入门通关教程》作者。
一、安装 Axios
npm install axios
二、Vue 3 中将 Axios 全局挂载
Vue 3 不再支持 Vue 2 中的 Vue.prototype 方式，而是通过 app.config.globalProperties 来达到相同效果：
全局挂载
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'const app = createApp(App)
app.config.globalProperties.$http = axiosapp.use(router).mount("#app")
三、在组件中使用 Axios
使用 getCurrentInstance 获取当前实例 (dev-only)
import { getCurrentInstance, onMounted } from 'vue'export default {setup() {const { ctx } = getCurrentInstance();onMounted(() => {ctx.$http.get('/api/user').then(res => console.log(res));});}
};
使用 proxy 替代 ctx (推荐)
import { getCurrentInstance, onMounted } from 'vue'export default {setup() {const { proxy } = getCurrentInstance();onMounted(() => {proxy.$http.get('/api/user').then(res => console.log(res));});}
};
应对环境错误：ctx 在打包后无法访问 globalProperties，需要使用 proxy 替代。
四、局部引入 + 分类使用
创建 /proxy/index.js
// proxy/index.js
import axios from 'axios';const getList = (url) => axios.get(url);export default {getList
};
在组件中使用
import axiosProxy from '../proxy';axiosProxy.getList('/api/todoList/list').then(res => {console.log(res.data);
});
五、Axios 基础用法
GET 请求
axios.get('/user?id=12345').then(res => console.log(res)).catch(err => console.error(err));
POST 请求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
}).then(res => console.log(res));
六、通用 config 配置
axios({method: 'post',url: '/user',data: {firstName: 'Fred'},timeout: 1000,headers: {'X-Requested-With': 'XMLHttpRequest'}
});
常用 config 项目概览
| 项目 | 说明 |
|---|---|
url | 请求地址 |
method | 方法 (get/post) |
baseURL | 基础路径 |
headers | 请求头 |
params | url 取值参数 |
data | 请求体数据 (post 用) |
timeout | 超时时间 |
七、定义全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 5000;
八、自定义实例 + 拦截器
定义一个独立实例
const instance = axios.create({baseURL: '/api',timeout: 10000,
});
拦截器
instance.interceptors.request.use(config => {// 添加公共 tokenconfig.headers.Authorization = 'Bearer your_token';return config;
}, error => Promise.reject(error));instance.interceptors.response.use(response => {return response.data; // 简化接口结果
}, error => Promise.reject(error));
九、返回结构
Axios 的响应包括如下结构：
{data: {}, // 接口返回数据status: 200, // HTTP 状态码statusText: 'OK',headers: {},config: {}, // 当前配置request: {} // XMLHttpRequest 对象
}
实际使用
axios.get('/user/12345').then(res => {console.log(res.data);
});
十、推荐扩展
- 把 axios 包装成 hooks
- 封装连接失败提示 / 热更新负载
- 通过
provide/inject分类控制 API 请求成本
总结
Vue 3 + Axios 是最常用的前后端通讯配置，重点是「全局 globalProperties 挂载 + proxy 替代 this + 分类 request」，这是一套无需完全依赖 UI 框架的经典组合技术路线，非常适合工程化开发和小组件开发。
关于我
最近在学习油猴脚本开发，写了很多有趣的脚本：
- 接口拦截工具：修改CSDN博客数据接口返回值
- Vue路由一键切换：开发效率起飞
- 任意元素双击实现画中画：摸鱼超级助手
- 掘金后台自动签到助手
- 解除文本复制、网页复制、一键下载为MD
- 主题切换助手
如果你对油猴脚本开发也感兴趣，可以参考我的油猴脚本开发教程
