1.Axios简介以及适用环境
1.Axios是什么：
Axios 是一个基于promise的http库，支持promise的api，用于向后台发送http请求，类似于jquery的Ajax。
2.Axios兼容性：
在pc浏览器中，理论上axios兼容ie8以上浏览器，但是Axios是基于Ie6的promise的，而IE的内核trident不能支持Promise，如果需要兼容IE浏览器，需要安装babel-polyfill来解决这个问题。
3. Axios的功能：
1）拦截请求和响应：在请求前和响应前做一些自定义的操作，例如在请求前，配置请求头信息；在响应前，处理响应数据等
2）转换请求数据和响应数据：例如请求时加密敏感信息，响应时解密数据等
3）取消请求
4）自动解析后台返回的json字符串，前后台传递数据一般都是字符串形式，日常获取后台数据需要我们用JSON.parse进行解析，axios会对返回的json字符串自动转换（ajax返回的data也是被解析好的json对象）
5）防御xsrf攻击（不做讨论）
2. Axios基础用法
1.axios的请求方法：get、post、put、patch、delete
1）get：获取数据
2）post: 推送数据（新建的数据）
3）put 和 patch: 用于更新数据 。put用于更新所有数据，patch用于更新部分数据（总数据过多的时候，修改其中部分数据时，使用pactch方法）
4）delete： 用于删除数据
2.axios配置5种请求方法：
1）get请求写法 示例：
1.get的参数直接拼在请求路径后面
axios.get('/data.json?id=10').then(res => {}).catch(err => {})
2.请求路径后面设置config对象，在config对象中设置get请求的参数
axios.get('/data.json',{
params:{
id:10
}
}).then(res => {}).catch(err => {})
3.给axios传递config参数 设置get请求
axios({
method:'get',
url:'/data.json'，
params:{
id:10
}
}).then(res=>{}).catch(err => {})
2）post请求写法
1. post别名的方式请求:
post 请求的data有两种方式格式
1、multipart/form-data，用于表单提交；
2、application/json
let data= {username：“kenan”，age：“17”}
axios.post('/postUrl',data,{}).then(res => {}).catch(err => {})
2.给axios传递config参数 设置post请求
axios({
method:'post',
url:'/postUrl'，
data:data
}).then(res=>{}).catch(err => {})
3.form-data请求
我们可以创建一个FormData对象，通过append() 方法向对象中添加键值对
let formData = new FormData()
formData.append("username", "Groucho")
也可以直接通过将一个表单元素传递给FormData，创建formdata对象
oData = new FormData(formEle)
axios.post('/postUrl',formData,{}).then(res => {}).catch(err => {})
3）put 和 patch 与post非常相似，调用的结果也只有method不同，它们其实完全可以由post完成，但是为了规范开发，在实际工作中要结合实际情况选用。
axios.put('/put',data,{}).then(res => {}).catch(err => {})
axios.patch('/patch',data,{}).then(res => {}).catch(err => {})
4）delete
删除的接口 的参数 有时是params 有时是data ，具体调用方式要跟后台同学商量好再用
1、参数在url中传递方式
axios.delete('delete',{
params: {
id: 12
}
}).then(res =>{})
2、参数用data的方式传递，不会拼接在接口路径后面
axios.delete('delete',{
params: {
id: 12
}
}).then(res =>{})
3、axios并发请求
并发请求： 同时进行多个请求，并统一处理返回值
用到了axios的两个方法 axios.all() axios.spread()
axios.all([
axios.get('/data.json'),
axios.get('/city.json')
]).then(axios.spread((dataResult,cityResult) => {
//对两个接口的返回值进行处理
}))
小 case： 其实两个接口的请求还是有先后顺序的，根据all中数组参数中，接口的顺序来调用
3. Axios实例
1）有时候，我们可能需要请求不同的域名的接口，即使请求同样域名的各个接口，需要配置的请求超时时间，请求头等可能也不同。
有了axios实例，我们不需要在每次调用接口的时候，都写一次配置信息，只需要创建实例，再用实例调用接口即可。
const instance = axios.create({
baseURL: 'localhost:8888', //请求的接口域名
timeout: 1000, //超时时间
})
instance.get('/url').then(res=>{}).catch(err => {})
小case：其实在直接使用axios的时候，我们应用的也是axios默认的实例。
4. Axios的常用配置参数（基本）
axios.create({
baseURL:'localhost:8888', //请求的域名
timeout: 1000, //请求超时时间，单位是毫秒ms
url:'/api', //请求的路径
method: 'get', // post put patch delete
headers: { // 设置请求头，在header中添加参数
token:1
},
params:{}, //请求参数会拼接在url后面
data:{} //请求参数会放在req.body中
})
axios全局配置 axios.default.timeout = 3000 给全局axios配置一个timeout参数
axios实例配置 let instance= axios.create({配置参数}) 实例没有配置的参数 将使用全局配置的参数
修改已经创建完成的实例的配置项： instance.default.timeout = 1000
axios请求配置 instance.get('json',{timeout:6000}).then(res=>{})
三种配置方式的优先级递增。
5.Axios拦截器
拦截器分为请求拦截器和响应拦截器：
请求拦截器：
axios.interceptors.request.use(config=>{
//发送请求前 做的事情
return config
},err => {
//请求错误的时候 做的事情 请求数据没有到后端 401 请求超时 404 请求不存在
return Promise.reject(err)
})
响应拦截器：
axios.interceptors.response.use(res =>{
//请求成功 对返回的数据做处理
return res //这里返回的数据 最终会返回到请求的then方法中 axios.get(‘/api’).then(res=>{})
},err=>{
//响应错误 请求到了后端 返回的错误 500服务器错误 502 服务器重启
return Promise.reject(err) //返回的数据 会返回到请求的catch（err=》{}）
})
取消拦截器： 取消之前设置的拦截器的方法
let icp= axios.interceptors.request.use(config => {
config.headers.auth= true //通过请求拦截器，给请求信息追加headers项
return config
})
axios.interceptors.request.eject(icp)
拦截器示例： 为请求添加loading
let instenc = aixos.create()
instenc.interceptors.request.use(config => {
//展示loading。。。
return config
})
instenc.interceptors.request.use(res =>{
//隐藏loading
return res
})
6.取消请求
了解：
//声明一个带有取消请求token的请求
let source = axios.CancelToken.source() //声明CancelToken
axios.get('/api',{
CancelToken: source.token
}).then(res => {}).catch(err => {
console.log(err)
})
//执行取消请求
source.cancel('取消请求的信息') //取消请求的信息将会被发送到catch中
//取消请求的信息不是必填的
