fetch与axios

fetch

fetch 是一个定层次的API，你可以吧它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装，杜鳌年爱，XMLHttpRequest一直是web开发者的亲密助手。无论是直接的，还是间接的，当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通讯的技术。Ajax的星期是由于Google的Gmail所带动的，随后被广泛应用到众多的Qeb蟾皮中，可以认为，开发者已经默认将XMLHttpRequest作为当前Web应用于远程资源进行通信的基础。而本文见过介绍的内容则是XMLHttpRequest作为了当前Web应用于远程资源通信的基础。而本文见过介绍的内容是XMLHttpRequest的最新替代技术———Fetch API。

---

一、fetch优势

1、 语法简洁，更加语义化
2、 基于标准Promise实现，支持async/await
3、更加底层，提供的API丰富（request，response）
4、脱离了XHR，是ES规范里新的实现方式

---

二、fetch存在问题

fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。

1、 fetch只对网络请求报错，对400,500都当做成功的请求，服务器返回 400,500错误码时并不会 reject ，只有网络错误这些导致请求不能完成时，fetch才会被reject。
2、fetch默认不会带cookie，需要添加配置项：fetch（url，{credentials:‘include’}）
3、 fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
4、fetch眉头办法原生监测请求的进度，而XHR可以

fetch('http://example.com/movies.json')
.then(function(response){
return response.json();
})
.then(function(myjson){
console.log(myjson)
})

---

axios

axios是一个基于Promise用于浏览器和node.js 的HTTP 客户端，本质上也是对原生XHR的封装，只不过他是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1、从浏览器中创建XMLHttpRequest
2、支持 Promise API
3、客户端支持防止CSRF
4、提供了一些并发请求的接口（重要，方便了很多的操作）
5、从node.js创建http请求
6、拦截请求和响应
7、转换请求和响应数据
8、取消请求
9、自动转换JSON数据

axios.get('/user',{
	params:{
		ID:12345
	}
})
.then(function(response){
	console.log(response);
})
.catch(function(error){
	console.log(error);
});

总结

---

1、fetch是一个底层的api浏览器原生支持的 axios 是一个封装好的框架 2、axios 1）支持浏览器和node.js发送请求 前后端发请求 2）支持promise语法 3）支持自动解析json 4）支持中断请求 5）支持拦截请求 6）支持请求进度监测 7）支持客户端防止csrf 3、 fetch 优点 ： 1）浏览器几倍原生支持的api 2）原生支持promise api 3）语法简洁 符合es标准规范 4）是由whatwg 组织提出的 现在已经是w3c规范 缺点： 1）不支持文件上传进度监测 2）使用不完美 需要封装 3）不支持请求中止 4）默认不带cookie 总之：缺点是需要封装 有点 底层原生支持