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中，）

如果返回数据失败。。。