首页 > 移动平台 > 详细

Vue—11—网络通信axios;

时间:2021-08-29 20:45:08      阅读:13      评论:0      收藏:0      [点我收藏+]

 

一、简介

如何使用?

  • npm install  axios -S
  • 使用方法axios(config)即可

方法axios()里面传入一个参数对象,参数对象里面可以有url属性、methods属性、params属性,

请求结束后会返回一个promise对象,所以我们可以添加一个then方法,如果请求成功会调用then方法,如下图所示。我们也可以添加一个catch方法,如果请求失败会调用catch方法;

技术分享图片

技术分享图片

 

 

 

二、使用axios发送并发请求:

技术分享图片

 

 

 

 

 三、全局配置

把一些共有的内容抽取出来,使用axios.default.属性名=值,进行配置;

技术分享图片

 四、实例配置

刚刚的全局配置可能也不太好,我们可以抽取出来,在某一个实例里的作用域进行配置

记住:使用axios配置的就是全局的,使用instance配置的就是实例的;

 技术分享图片

 

 

五、封装axios

我们现在想使用axios发送网络请求,需要在每个vue文件里导入import  axios  from ‘axios’, 然后才可以使用axios(config)函数。

这就有个隐患,如果以后axios以后不能用了,那么我们就需要找到每个使用了axios的vue文件并进行修改,非常麻烦,没有统一管理的封装思想,所以我们要封装成一个文件,所有的vue文件想进行网络请求就是用我们自己的request文件所提供的方法。

这样当后期axios不维护的时候我们只需要修改request这一个文件即可。

 

技术分享图片

 

 

技术分享图片

 

 

六、拦截器

在使用axios发送请求前

如果发送请求成果拦截下来进行一定的处理,并return ,继续发送

如果发送请求失败拦截下来,(一般发送请求不会失败)

 技术分享图片

 

 如果返回数据成功先拦截下来并进行一定处理然后再返回(后端返回的数据一般都在response.data中,)

如果返回数据失败。。。

技术分享图片

 

Vue—11—网络通信axios;

原文:https://www.cnblogs.com/EricShen/p/15162447.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!