Ajax异步请求:
AJAX可以在不更新全局的情况下更新局部页面。通过在与服务器进行数据交换,可以使网页实现异步更新。
AJAX的原理就是通过XHR对象来向服务器发起异步请求,从服务器获得数据,然后用JS来操作DOM更新页面。领导想找小李汇报一下工作,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作。Ajax请求数据流程与“领导想找小李汇报一下工作”类似,上述秘书就相当于XMLHttpRequest对象,领导相当于浏览器,响应数据相当于小李。浏览器可以发送HTTP请求后,接着做其他事情,等收到XHR返回来的数据再进行操作。
AJAX的缺点:
- 本是针对MVC架构,不符合前端MVVM的浪潮
- 基于原生的XHR开发
- 配置和调用方式混乱
fetch:
可以在浏览器直接使用获取请求(native code:原生),不需要额外写代码,没有进行二次转换
缺点:
- 过于底层,有很多状态码没有进行封装
- 无法阻断请求
- 兼容性差
- 无法检测请求进度
axios:
第三方类库(Library类库),需要安装、引入,才能使用。封装好的,有三个层级。
axios是基于Promise对XHR进行封装,它内部封装了两个拦截器,分别是请求拦截器和响应拦截器。
请求拦截器:用于在请求发出之前进行一些操作,比如:设置请求体,携带Cookie、token等;
响应拦截器:用于在得到响应后进行一些操作,比如:登录失效后跳转到登录页面重新登录。
axios有get、post、put、patch、delete等方法。
特点:
axios可以对请求和响应进行监听;
返回Promise对象,可以使用Promise的API;
返回JSON格式的数据;
由浏览器发起请求;
安全性更高,可以抵御CSRF攻击。
项目最终会选用axios