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可以
