vue axios接口请求封装方式
更新时间：2023年01月20日 09:54:10 作者：AIpoem
这篇文章主要介绍了vue axios接口请求封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue axios接口请求封装
简易记录一下最近用到的比较顺手的、axios接口请求的封装
1、新建network文件夹，其内新建request.js
设置一个 baseURL ，便于为axios实例传递相对url
2、新建api文件夹，其内新建index.js、home.js
index.js主要是为了便于导出可能有多个页面相关的请求home.js中主要封装有关home页的请求操作，这里名字随便取即可
3、在main.js中导入/api/index.js并将其挂载在vue的原型上
这样 $api 在所有Vue实例中都是可用的
4、使用
在需要发送网络请求的组件中：
1.14 补充一下关于登陆的需要验证token的封装
之前发布的是不需要验证token的，因为当时做的时候并没有登录功能
下面用到拦截器和导航守卫
为了避免有人通过直接输入url，来访问一些需要登录后才能访问的页面，我们需要设置导航守卫
在router/index.js中设置
这里对导航守卫不做过多阐述，不理解的也可以看下我这篇文章浅学一下
或者自行了解
（注意：需要给login页的路由配置name: 'login'哦）
关于request.js的封装是接着上面的继续的：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家整理了Vue3的8种和Vue2的12种组件通信的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，值得收藏2023-04-04
最近在开发中遇到了一个新需求：列表轮播滚动,实现方式也有很多,比如使用第三方插件,但是由于不想依赖第三方插件,想自己实现,于是我开始了尝试,但是在这个过程中遇到了动态绑定style样式不生效,所以本文介绍了Vue实现无限轮播效果时动态绑定style失效的解决方法2024-08-08
element ui的el-input-number修改数值失效的问题及解决
这篇文章主要介绍了element ui的el-input-number修改数值失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
下面小编就为大家分享一篇mint-ui 时间插件使用及获取选择值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue.draggable实现表格拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了Vue支持搜索与筛选的用户列表实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要为大家详细介绍了VUE实现时间轴播放组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了VUE项目中路由之间的传值方式，文中的示例代码讲解详细，涉及到的方法也都是开发时常用的，希望对大家有多帮助2023-06-06
在Vue 3中,前端无法直接将Word文档转换为PDF,因为Word文档的解析和PDF的生成通常需要在后端进行这篇文章主要介绍了Vue3实现word转成pdf代码的方法,需要的朋友可以参考下,2023-07-07
在前端开发中,权限管理是一项至关重要的任务,本教程将深入探讨如何在 Vue.js 项目中实施权限管理,并详细讲解如何实现到按钮级别的细粒度控制,希望对大家有所帮助2024-11-11
最新评论