JS基础 —— fetch 与 ajax

导言

今日别人突然想我提起了fetch,还问了和ajax有何区别。我当时一脸懵，虽然之前看到别人使用过fetch,但没有深入了解。近日研究了一下分享给大家~~

你所熟悉的ajax

相信大家对ajax的理念和用法，已经非常熟悉了，毕竟这门技术已经1998年前后就得到了应用，已经发展了十几年。在前后端通信领域占据着重要地位！
核心对象：XMLHTTPRequest
在利用XMLHttpRequest对象实现ajax请求时，发现ajax:
1、前端程序员们要考虑浏览器的兼容性

if(window.XMLHttpRequest){
       var oAjax=new XMLHttpRequest();
}else{
       var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

2、 是一个较粗糙的API，配置和调用方式混乱

oAjax.open('GET', url, true);  
oAjax.send(); 
oAjax.onreadystatechange=function (){ 
	if(oAjax.readyState==4){ 
 	if(oAjax.status==200){ 
    		fnSucc(oAjax.responseText); 
	 	}else{ 
			if(fnFaild){ fnFaild(); 
		}
 	} 
 };

3、各种回调函数，饱受回调地狱的折磨

全新fetch

Fetch的核心是HTTP Requests，Responses Headers和Bodypayload 的接口抽象，以及一个用于启动异步资源请求的全局fetch方法。由于HTTP的主要组件被抽象为JavaScript对象，所以其他API可以很容易利用这些功能。
它的主要特点有：
1、使用了 JavaScript Promise 来处理结果/回调

fetch(...).then(fun2).then(fun3) //各依赖有序执行
.....
 .catch(fun)

2、基础用法

fetch(url,init）【请求地址，第二个是可选参数，可以控制不同配置的 init 对象】

3、Fetch 跨域请求时默认不会带 cookie，需要时得手动指credentials:‘include’，这和 XHR 的 withCredentials 一样，只是 withCredentials 只要设为 true。
4、浏览器兼容性

Polyfill

要在不受支持的浏览器中使用Fetch，可以使用Fetch Polyfill，为不支持的浏览器重新创建功能。

总结

fetch采用了Promise的异步处理机制，使用起来比ajax较为简单。

其他：

• fetch请求对某些错误http状态不会reject。这主要是由fetch返回promise导致的，因为fetch返回的promise在某些错误的http状态下如400、500等不会reject，相反它会被resolve；只有网络错误会导致请求不能完成时，fetch 才会被 reject；所以一般会对fetch请求做一层封装。
• fetch不支持progress事件，XHR是原生支持progress事件的。无法监控读取进度。
• fetch不能中断