汕头网站建设方案书,网站设计网络公司,网站服务费做啥费用,wordpress字体自适应从入门到深入#xff0c;手把手教你在 Vue 3 中正确使用 Axios#xff0c;支持全局挂载、局部分离、使用 proxy 连接场景#xff0c;适合所有前端小白和实战设计。 大家好#xff0c;我是石小石#xff01;一个热爱技术分享的开源社区贡献者#xff0c;小册《油猴脚本实战…从入门到深入手把手教你在 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 axiosconst app createApp(App)
app.config.globalProperties.$http axiosapp.use(router).mount(#app)三、在组件中使用 Axios
使用 getCurrentInstance 获取当前实例 (dev-only)
import { getCurrentInstance, onMounted } from vueexport default {setup() {const { ctx } getCurrentInstance();onMounted(() {ctx.$http.get(/api/user).then(res console.log(res));});}
};使用 proxy 替代 ctx (推荐)
import { getCurrentInstance, onMounted } from vueexport 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?id12345).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请求头paramsurl 取值参数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 主题切换助手 如果你对油猴脚本开发也感兴趣可以参考我的油猴脚本开发教程
