React 应用中的异步数据请求----fetch,以及fetch的优缺点

React 应用中的异步数据请求----fetch

与Vue.js一样，React官方也没有提供服务器端接口异步请求方案；
可以使用第三方的axios模块，或者H5新增的原生技术：fetch(抓取)---- 有望取代XHR
使用fetch发起GET请求：

fetch(url)
	.then( res=>res.json() )//res就是完整的响应消息;res.body是流对象
	.then( data=>console.log(data) )
	.catch( err=>console.log(err) )

使用fetch发起POST请求：

fetch(url, {
	method: 'POST',//请求方法
	headers: { 'Content-Type': 'application/x-www-form-urlencoded' },//请求头
	body: 'k=v&k=v'//请求主体
})
	.then( res=>res.json() )
	.then( data=>console.log(data) )
	.catch( err=>console.log(err) )

fetch有望取代XHR请求,是在ES6出现的,使用了ES6中的promise对象,是基于promise设计的,其代码结果比ajax简单多了,参数有点想jQuery ajax
但是fetch不是ajax的进一步封装,而是原生的js,没有使用XMLHttpRequest对象

fetch的优缺点

优点:

①、语法简介,更加语义化
②、基于标准的promise实现,支持async/await
③、同构方便,使用isomorphic-fetch
④、更加底层,提供的API丰富
⑤、脱离了XHR,是ES规范里新的实现方式
⑥、其考虑到了传输的文件比较大的时候的处理

缺点

①、当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
②、fetch 不会发送跨域 cookies，需要添加配置项： fetch(url, {credentials: ‘include’})
③、fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
④、fetch没有办法原生监测请求的进度，而XHR可以