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的封装是接着上面的继续的：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue.js中created方法作用及mounted和created的区别介绍，需要的朋友可以参考下2018-03-03
contenteditable 属性为网页开发者提供了一种灵活的方式来创建可编辑的内容区域,使用户可以直接在网页上进行内容编辑,而无需依赖传统的输入框,本文将利用contenteditable打造定制化输入,感兴趣的可以了解下2023-12-12
在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,下面这篇文章主要给大家介绍了关于vue如何定义全局变量和全局方法的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vuejs实现标签选项卡-动态更改css样式的方法，代码分为html和js两部分,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue项目打包后放服务器非根目录下图片找不到问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式，需要的朋友参考下吧2018-08-08
这篇文章主要为大家详细介绍了Vue自定义指令的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
在前端开发中，级联选择框是经常用到的，这样不仅可以增加用户输入的友好性，还能减少前后端交互的数据量。本文就介绍一下使用Vue实现级联下拉框，感兴趣的可以了解一下2021-07-07
今天小编就为大家分享一篇解决vue项目nginx部署到非根目录下刷新空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue项目如何修改title旁边的icon图片，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论