axios 框架的介绍和基本使用

1、axios 是个啥？

直白点说，比如在开发前端应用程序的过程中需要用到的一些文字、图片等资源，ta门一般会被提前放到服务器上，这样的话就要向服务器发送网络请求获取这些资源，然后才能在应用程序上对其进行效果展示，axios 就是这样一个网络请求的第三方框架。

附上axios 中文官网。

2、为啥选 axios ？

在 Vue 的开发过程中能实现发送网络请求的方式有很多种，下面详细看一下每种方式和选 axios 的原因：

1、传统的 Ajax 是基于 XMLHttpRequest（XHR）

因为在项目开发中封装它的过程比较麻烦，配置和调用方式也比较混乱，一般开发不会用这种方式，而是用 jQuery-Ajax 。

2、jQuery-Ajax，相对于传统的 Ajax 非常好用

jQuery-Ajax 相对于传统的Ajax来说就比较好用了，但是在 Vue 的开发过程中不需要使用 jQuery ，而且jQuery是个比较重量级的框架，没有必要为了方便进行一个网络请求，特意引入一个 jQuery。这是 jQuery-Ajax 的传送门

3、Vue官方曾推出过 Vue-resource 插件

Vue-resource 的体积相对于 jQuery 小很多。但是到目前来Vue 2.0 版本推出之后，尤小右同学说以后不再对 Vue-resource 进行维护和更新了，所以说继续用这种方式开发项目会有很大隐患哦。

4、尤小右同学在说明不再继续更新和维护 Vue-resource 的同时，还推荐了一个框架 axios 。

axios 有非常多的优点并且用起来也非常方便，它支持在浏览器中发送 XMLHttpRequests 请求，支持在node.js中发送 http 请求，支持 Promise API，可以拦截请求和响应，可以转换请求和响应数据。（反正就是很牛逼，还不赶紧用你是在寻思啥呢？）

3、axios 的基本使用

3.1、先说一下怎么安装和引入：

npm install axios --save    //项目中安装import axios from 'axios'    //使用前引入

3.2、axios 有很多请求方式，具体可以看一下官网的API，下面说一下最基本的使用方式：

axios({url:'http://127.0.0.1:8000/home/login',  //这里写你要发请求的服务器urlmethod:'get'        //(默认是get请求)
}).then(res => {console.log(res);    //在控制台查看请求的数据
})axios({        url:'http://127.0.0.1:8000/home/register',  //这里写你要发请求的服务器urlparams:{      //专门针对get请求的参数拼接,如果是post请求用 data:{}type:'',page:}
}).then(res => {console.log(res);    //在控制台查看请求的数据
})

3.3、axios 发送并发请求：axios.all 方法可以放入多个请求的数组，它返回的也是一个数组，可以用 axios.spread 将数组展开

axios.all([axios({url:'http://127.0.0.1:8000/home/login'        //第一条请求的url
}),axios({url:'http://127.0.0.1:8000/home/register',       //第二条请求的urlparams:{      //专门针对get请求的参数拼接,如果是post请求用 data:{}type:'',page:}
})]).then(results => {    //两条请求都拿到之后再做下一步操作console.log(results);console.log(results[0]);console.log(results[1]);
})axios.all([axios({url:'http://127.0.0.1:8000/home/login'        //第一条请求的url
}),axios({url:'http://127.0.0.1:8000/home/register',       //第二条请求的urlparams:{      //专门针对get请求的参数拼接,如果是post请求用 data:{}type:'',page:}
})]).then(axios.spread((res1,res2) => {    //用 axios.spread 将数组展开console.log(res1);console.log(res2);
}))

4、axios 相关配置

4.1、如果发送多个请求的话，每个请求的 url 前缀，超时时间等设置都是一样的，这样可以将重复的信息进行抽取：

//比如发送的第一个请求的 url 是：http://127.0.0.1:8000/home/login
//比如发送的第一个请求的 url 是：http://127.0.0.1:8000/home/register//这样就可以对两个 url 的前缀进行抽取:http://127.0.0.1:8000//使用全局的 axios 和对应的配置进行网络请求
axios.defaults.baseURL ='http://127.0.0.1:8000'
axios.defaults.timeout = 5000    //请求超时时间也可以提取
axios.all([axios({url:'/home/login'
}),axios({url:'/home/register',params:{          //专门针对get请求的参数拼接,如果是post请求用 data:{}type:'sell',page:5}
})]).then(axios.spread((res1,res2) => {console.log(res1);console.log(res2);
}))

4.2、axios 还有一些其他的配置选项，详细可以移步 axios 官网 Config API 。

5、axios 实例

5.1、为啥要创建 axios 实例：

如果项目比较大的话，考虑到并发量比较高，一个服务器可能满足不了整个业务的需求，这个时候就可能会用到多个服务器，这样的话服务器的 url 不一样，如果还是对 url 进行全局配置 baseURL 就不合适了，针对这一问题（也就是服务器不在一个 ip 地址里），单独创建 axios 实例就会方便很多。创建不同的实例，每个实例都有不同的配置，可以满足业务复杂的需求。

5.2、怎么创建 axios 实例，并用 axios 实例发送请求：

const instance1 = axios.create({    //创建对应的 axios 实例baseuRL:'http://127.0.0.1:8000',timeout:5000
})instance1({            //直接用实例发送请求url:'/home/ligin'
}).then(res =>{console.log(res);
})instance1({            //直接用实例发送请求url: '/home/register',params: {        //专门针对get请求的参数拼接,如果是post请求用 data:{} data:{}type: '',page: }
}).then(res =>{console.log(res);
})const instance2 = axios.create({    //再创建一个 axios 实例baseuRL:'http://111.000.000.001:8000',timeout:10000
})
......

6、axios 模块封装

6.1、为啥要封装 axios 模块：

如果对每个需要发送网络请求的组件都引入 axios 的话，这样整个项目对 axios 的依赖性太大了，一旦 axios 崩了，或者像 Vue-resource一样被官宣不再继续维护了，那你这个项目就 mmp 了懂吧，所以就要对 axios 模块进行封装，单独搞一个文件对 axios 做一个封装，之后所有的组件在进行网络请求的时候都面向这一个文件，假如一旦有一天 axios 不再维护了，也根本不慌，只需要对 axios 封装的文件进行修改就完事了，真是个小机灵鬼。

6.2、怎么封装 axios 模块：一般新建一个 request.js 文件用来封装 axios；

import axios from 'axios'export function request(config) {//创建axios实例const instance = axios.create({baseURL:'http://127.0.0.1:8000',timeout:5000})//发送真正的网络请求return instance(config)
}

6.3、在需要发送网络请求的地方调用这个request 方法：

import request from  "./request"request({url:'/home/login'
}).then(res => {console.log(res)
}).catch(err =>{console.log(err)
})

如果有一天 axios 真崩了，只需要把 request.js 文件的代码改一下，也 return 一个结果出来就 ok 了。附上axios 中文官网。