什么是axios？
- axios是基于promise的Http客户端，简单来讲就是可以通过axios来向后台发送请求，并在请求中做更多的可控功能！由于没有具体的翻译，个人理解的axios的名称由来：ajax i/o system
文档网站
axios的特点
- 在浏览器中创建
XMLHttpRequests请求 - 在node中发送
http请求 - 支持
promise api - 拦截请求数据和响应数据
- 取消请求
- 自动转换为
JSON格式 - 客户端支持防御
XSRF
axios--post和get
1.get 请求：
image.png
2.post请求：
image.png
并发请求
1.使用axios.all()来处理并发请求，可以放入多个请求数组
2.axios.all([axios.get('/user/12'),axios.post('/user/34',{config})])返回的是一个数组,使用axios.spread可以将数组展开：[arr1,arr2]==>arr1,arr2
image.png
全局配置
事实上在开发中很多参数都是固定的，这个时候可以进行抽取，利用axios的全局配置axios.defaults
axios.defaults.baseURL = '123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios实例
为什么创建实例，原因是当我们axios模块中导入对象时，使用的是默认的实例，当给这些实例设置默认配置时这些配置就被固定下来了，但后续开发中某些配置或许会不一样，如timeout，content-Type等，这时我们就可以创建新的实例，并传入属于该实例的配置信息
image.png
image.png
拦截器
1.axios请求拦截器：axios.interceptors.requset.use(callback(config))
2.axios响应拦截器：axios.interceptors.response.use(callback(response))
3.实例请求拦截器：instenceAxios.interceptors.requset.use(callback(config))
4.实例响应拦截器：instenceAxios.interceptors.response.use(callback(response))
image.png
封装axios
为什么要对axios进行封装了，原因是如果在项目中对一个第三方库过于依赖的话，当第三方库不进行更新的维护的时候，那么我们的项目更换另一个库或者进行维护会很难，所以我们对axios进行封装，遇到这样的情况就可以只针对我们封装的东西进行修改就行！
//requset.js
//第一步，引入axios模块
import axios from 'axios'
//导出封装函数
expoet default function request(config){
//创建实例
const instance = axios.create({
baseURL = '127.168.0.0.1:8000' ,
timeout = 5000
})
//创建请求拦截器
instance.interceptors.request.use(config=>{
//dosomething
return config
},error=>{
//do something
console.log(error)
})
//创建响应拦截器
instence.interceptors.response.use(res=>{
//do something
return res
},error=>{
console.log(error)
})
//返回该实例，发送真正的请求
return instance（config）
}
可以对网络请求针对不同的页面数据进一步封装，这样就不会显得过于耦合，request.js也不会很臃肿
//home.js
import request from 'request.js'
export homeRequset(type,age){
return request({
url:'/user',
params:{
type,age
}
})
}