当前位置: 代码网 > it编程>前端脚本>Vue.js > vue axios接口请求封装方式

vue axios接口请求封装方式

2024年05月19日 Vue.js 我要评论
vue axios接口请求封装简易记录一下最近用到的比较顺手的、axios接口请求的封装1、新建network文件夹,其内新建request.js设置一个 baseurl ,便于为axios实例传递相

vue axios接口请求封装

简易记录一下最近用到的比较顺手的、axios接口请求的封装

1、新建network文件夹,其内新建request.js

设置一个 baseurl ,便于为axios实例传递相对url

2、新建api文件夹,其内新建index.jshome.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的封装是接着上面的继续的:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com