vue axios接口请求封装
简易 记录一下最近用到的比较顺手的、axios接口请求的封装
1、新建 network 文件夹，其内新建 request.js
设置一个 baseURL ，便于为axios实例传递相对url
2、新建 api 文件夹，其内新建 index.js 、 home.js
index.js 主要是为了便于导出可能有多个页面相关的请求 home.js 中主要封装有关home页的请求操作，这里名字随便取即可
3、在 m ai n.js 中导入 /api/index.js 并将其挂载在vue的原型上
这样 $api 在所有 vue实例 中都是可用的
4、使用
在需要发送网络请求的组件中：
1.14 补充一下关于登陆的需要验证token的封装
之前发布的是不需要验证token的，因为 当时 做的时候并没有登录功能
下面用到拦截器和导航 守卫
为了避免有人通过直接输入url，来访问一些需要登录后才能访问的页面，我们需要设置导航守卫
在 router/index.js 中设置
这里对导航守卫不做过多阐述，不理解的也可以看下 我这篇文章 浅学一下
或者 自行 了解
（注意：需要给lo gin 页的路由配置 n am e: & # 39; LOG in' 哦）
关于 request.js 的封装是接着上面的继续的：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : Vue之Axios的异步请求问题详解 Vue如何处理Axios多次请求数据显示问题 Vue使用axios进行get请求拼接参数的2种方式详解 vue中使用axios固定url请求前缀 Vue简单封装axios网络请求的方法 Vue使用ajax(axios)请求后台数据的方法教程 Vue axios库避免重复发送请求的示例介绍
总结
以上是 为你收集整理的 vue axios接口请求封装方式 全部内容，希望文章能够帮你解决 vue axios接口请求封装方式 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue axios接口请求封装方式的详细内容...