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中,)
如果返回数据失败。。。