Axios

axios是配合vue发送请求的一个库，区别于ajax在于ajax的使用大多需要依赖jquery库，而axios则是自己封装了自己的库。

1、axios的基本使用：

1、axios({url:"",params:{},method:).then().catch()

2、axios.get({url:'',params}).then().catch()

3、处理多个并发请求

axios.all([axios({url:"",params:{})]).then().catch()

注意：

发送请求的参数会根据不同请求而不同。post请求的参数应该用data来写，而get请求的参数则是用params来写，否则会造成无法接收。

2、考虑到一个项目可能会请求不同服务器上的数据，此时他的路径是不同的，这时候可以创建多个axios实例，每个实例都有他自己的baseURL，timeout等公有的属性。

创建axios实例，首先需要create一个实例，然后调用实例，如下图：

3、封装axios模块：

为什么要封装axios模块？

一个项目中会有很多组件需要发送请求，这时候每当写一个组件都需要重新引入axios，如果axios这个库不再维护了，那么很多个组件都需要修改，这时候会造成很大的工作量，不易于后期的维护。所以要将axios封装成一个独立的文件，组件发送请求的时候只要调用这个文件即可，即是需要修改，也只是修改这一个文件，不需要大面积的去修改其他文件，可维护性增高。因此封装独立的axios模块是必要的。

如何封装axios模块？

1、首先创建新的文件夹network，文件夹里创建一个request.js,用来写具体的封装的方法

2、引入axios模块，将request方法导出，方便调用

3、封装request方法

3.1、为request传入三个参数，第一个是请求头的信息config，第二个是成功的回调函数，第三个是失败的回调函数。调用的时候，传入相应的对象。

3.2、用promise的方法，使用resolve,reject来处理成功和失败的相应回调。使用时用then,catch来得到返回的数据

3.3、3.2的升级版，因为在axios内部就是promise封装的，所以在用promise的时候可以省去promise的创建，可以直接将实例化对象返回

下面分别对应方法1,2,3

1

2

3

调用

4、拦截器的使用

分为四个，请求成功，请求失败，响应成功，响应失败

instance1.interceptors.request.use().then().catch()

instance1.interceptors.response.use().then().catch()

具体见下图