1,fetch 优缺点
1,fetch 是低层次的api,可以考虑成原生的 XHR,所以用起来并不是很舒服,需要进行封装
2,优点:
- 语法简洁,更加语义化
- 基于标准 Promise 实现,支持 async/await
- 更加底层,提供丰富的API
- 脱离了 XHR,是ES规范里新的实现方法
3,缺点:
* fetch 只对网络请求报错,对于400,500都当做成功的请求,服务请返回400,500错误码时,并不会reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject
* fetch 默认不会带 cookie,需要添加配置项:fetch(url,{credentials:'include'})
* fetch 不支持 abort,不支持超时控制,使用 setTimeout 及promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
* fetch 没有办法原生监听请求的进度,而XHR可以
* fetch 上传文件时,不支持进度检测
2,axios 优缺点
1,定义:axios基于promise用于浏览器和nodejs的http客户端,本质上也是对原生XHR的封装,只不过他是promise的实现版本,符合最新ES规范
2,axios 特征:
* 从浏览器中创建 XMLHttpRequest
* 支持 Promise API
* 客户端支持防止 CSRF
* 提供一些并发请求的接口(重要,方便了很多的操作)
* 从 nodejs 创建 http 请求
* 拦截请求和响应
* 转换请求合响应数据
* 取消请求
* 自动转换JSON数据
注:axios 底层是 XMLhttpRequest
fetch 与 axios 某种程度上讲,不是一个层面比较
3,axios 与 fetch 比较
前端的标准: w3c,
whatwg 与 w3c
fetch api 就是whatwg制定的
- fetch:是底层次的api,浏览器原生支持的
- axios:是一个封装好的框架
axios:
1,支持浏览器与nodejs前后端发请求
2,支持promise语法,
3,支持自动解析json
4,支持中断请求
5,支持拦截请求
6,支持进度条检测
7,支持客户端防止CSRF
总结:封装比较好
fetch:
- 优点:
1,浏览器级别原生支持的api
2,原生支持promise api
3,语法简洁,符合 es 标准规范
4,由whatwg组织提出的,现在已经是w3c规范
- 缺点:
1,不支持文件上传进度监测
2,默认不带cookie
3,不支持请求终止
4,使用不完美,需要封装
总结:最大缺点:需要封装,最大优点:支持底层原生