前端网络请求的选择
选择一: 传统的Ajax是基于XMLHttpRequest(XHR)
选择二:会使用jQuery-Ajax
选择三: Fetch API
选择四: axios
Axios的基本使用
支持多种请求方式: restful
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios发送请求
◼ axios发送请求:
直接通过axios函数发送请求
发送get请求
发送post请求
多个请求的合并
使用async、await发送请求
◼ axios函数、get、post请求本质上都是request请求
axios的配置信息
1.请求配置选项
2.响应结构信息
3.全局默认配置
4.自定义实例默认配置:
优先是请求的config参数配置;
其次是实例的default中的配置;
最后是创建实例时的配置;
axios拦截器
axios库有一个非常好用的特性是可以添加拦截器:
请求拦截器:在发送请求时,请求被拦截;
发送网络请求时,在页面中添加一个loading组件作为动画;
某些网络请求要求用户必须登录,可以在请求中判断是否携带了token,没有携带token直接跳转到login页面;
对某些请求参数进行序列化;
响应拦截器:在响应结果中,结果被拦截;
响应拦截中可以对结果进行二次处理(比如服务器真正返回的数据其实是在response的data中);
对于错误信息进行判断,根据不同的状态进行不同的处理;
axios二次封装