Vue—11—网络通信axios;


 

一、简介

如何使用?

  • 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中,)

如果返回数据失败。。。

 

posted @ 2021-08-28 16:06  Eric-Shen  阅读(66)  评论(0编辑  收藏  举报