vue封装axios(大佬们改回来了,asiox 嘻嘻)

关于vue封装axios

首先建了3个文件夹,作为存储,也就是3个模块

分别是config,untils,services

配置文件夹

config中我存放的是接口的域名,因为同一个项目中接口的前缀也就是域名都是相同的,当我们向后台请求数据的时候,肯定不止一个数据,这样请求就会很繁琐,代码块重复,也不利于维护修改。 

封装域名

而当我们需要使用这些域名时 ,在main.js中引入,就可以使用了

untils中存放封装好的axios请求方法  当需要向后台请求数据的时候调用就好

封装axios方法

axios中使用promise进行异步操作,resolve,reject中使用箭头函数来处理请求的数据结果

services中就是我们向接口请求数据了,


向后台接口请求数据

在product中引入刚才封装好的axios方法,因为axios请求后返回的是数据,所以必须return一下 ,否则拿不到数据,

组件中需要向后台请求数据的时候,直接引入product,再new实例化一下,proto连接原型链,就可以在组件中调用product中的方法了,可以传参数进行接口的参数拼接,来获取数据


组件中引入product并实例化


组件内调用封装好的axios方法 lisrparams作为参数
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 一...
    kangaroo_v阅读 8,471评论 1 67
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,032评论 1 4
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,167评论 1 32
  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/218...
    TigerChain阅读 26,389评论 5 70
  • 忍字心头一把刀,很多时候很多事情,都需要我们忍。包括容忍,宽容,对家人对同事对朋友,都是如此。小不忍则乱大谋,退一...
    立达阅读 214评论 0 0