特点：
1 从浏览器创建XMLHttpRequests
2 从node.js创建http请求
3 支持Promise API
4 拦截请求和响应
5 转换请求和响应的数据
6 取消请求
7 自动转换JSON数据
8 客户端支持预防XSRF
Axios是一个基于promise的HTTP库，可以用于浏览器和node.js
vue-cli3,生成的项目，public就是根目录，实际上访问的就是public下的index.htm,所在在
public下的文件需要访问，直接/文件名 就可以了
axios请求的方法常见有5种
：get post put delete patch
get:获取数据
post：提交数据 表单提交，文件上传
put:更新数据（所有数据推送到后端）
patch：更新数据（只将修改的数据推送到后端）
delete:删除数据
post 有content-type
form-data 表单提交 文件上传 图片上传
需要使用FormData 将数据转化程度能够formData格式
let formData=new FormData();
for(let key in data){formData.append(key,data[key])}
applicition/json
并发请求：同时进行多个请求，并统一处理他们的返回值
axios.all() axios.spread()
axios.all() 参数是数组，请求方法，所有请求都成功之后执行回调函数axios.spread()
demo:
axios.all([axios.get(url1),axios.get(url2),axios.get(url3)]).then(
axios.spread((data1,data2,data3)=>{//执行回调函数spread，有一个请求就有几个返回值
})
);
axios实例 axios.create()
用处：多个后台接口域名 超时时长不一样
axios参数配置：
baseURL:请求的域名，基本地址
timeout:设置请求的超时时长，单位是毫秒(ms)
url:请求的路径
method：请求的方法
headers:{}设置请求头 ，比如token
params:{},//请求参数拼在url上
data:{}请求参数放在请求体中
1 axios全局配置 用的比较少
2 axios实例配置 实际开发中，都会声明一个实例，在实例中进行配置
3 axios请求配置
1 全局配置
axios.defaults.timeout=1000;
axios.defaults.baseURL="xxxxxxxx";
2 实例配置
let instance=axiso.create();
instance.defaults.timeout=3000;
3 请求配置
instance.get(url,{timeout:5000}).then().catch()
优先级：1 2 3 由低到高
拦截器
在请求或响应被处理前拦截它们
请求拦截器 响应拦截器
axios.interceptors.request.use(config=>{//爱发送请求前做些什么return config},err=>{return Promise.reject(err)})
axios.interceptors.response.use(res=>{//请求成功对响应数据做处理return res;},err=>{//响应错误做些什么 return Promise.reject(err)})
请求错误：请求没有发送到后台出现的错误
响应错误：发送到后台，出现的错误
取消拦截器（了解）
let interceptors=axios.inerceptors.request.use(config=>{},err=>{})
axios.interceptors.request.eject()
错误处理：请求错误和响应错误都会进入catch
404 请求没有找到 401 请求超时
响应错误以5开头的
500 系统错误 502 系统重启
在实际开发中，一般添加统一错误处理
就是使用请求和响应拦截器
取消请求：
用于取消正在进行的http请求（了解）
需要在发送的请求中带上取消请求的token参数
demo:
let source=axios.CancelToken.source();
axios.get().then(res=>{
console.log(res)
}).catch(err=>{//请求取消之后进入catch
})
//取消请求(message会被cancel捕获)
source.cancel('cancel http')
//什么情况下可能用到取消请求
在请求数据时间比较长，需要取消请求的地方会用到
axios封装：
demo：
第一步：将所有的请求放在一个文件中
1.1 新建service文件键，新建url.js
const urlList={
getList:{
url:'/getList',
method:'get'
},
saveList:{
url:'',
method:'post'
},
updataList:{
url:'',
method:'post'
},
};
export default urlList;
1.2 新建http.js ，新建axios实例，时间request和response的过滤，通过for循环实现不同的请求方法
import urlList from './url.js'
import axios from 'axios'
let instance=axios.create({
baseURL:'http://localhost:8081',
timeout:1000
});
instance.interceptors.request.use(config=>{
return config;
},err=>{
console.log(err);
})
instance.interceptors.response.use(res=>{
return res;
},err=>{
console.log(err);
})
const Http={};//包装请求方法的容器
// 循环遍历输出不同的请求方法
for(let i in urlList){
// 使用async await的原因，避免进入回调地狱，
//使用回调的弊端：一个请求的参数依赖于另一个请求的返回值，就需要在回调函数中执行另一个请求，如果这样的依赖比较多就会陷入回调地狱，使用async await 可以直接按正常代码进行书写，看着更规范易懂
Http[i]=async function(params,isFormata=false,config={}){
let api=urlList[i];
let res=null;
let newParams=params;
if(api.method=="post"||api.method=='put'||api.method=='patch'){
try{
res=await instance[api.method](api.url,newParams,config);
}catch(err){
res=err;
}
}else{
config.params=newParams;
try{
res=await instance[api.method](api.url,config);
}catch(err){
res=err;
}
}
return res;
}
}
export default Http;
第二步：在main,js中注册http为vue的全局变量
import Http from './service/http'
Vue.prototype.$http=Http;
第三步：使用（要与封装的方法一直，使用async 和await）
async getList(){
let res=await this.$http.getList();
}