fetch的介绍

react和vue一样，官方没有提供服务器端接口异步请求方法，在这次学习react的时候，请求用的是fetch方法。

fetch是ajax2.0，不是ajax的进一步封装，属于原生的js，没有使用XMLHttpRequest对象；新的浏览器都是支持Fetch API的，无须引入其他库就能实现Ajax，使用的方式和axios差不多；

fetch是在ES6中出现的，使用了ES6的promise对象，基于promise设计的。

在浏览器兼容性上，除了IE外，其他主流的浏览器都是兼容的。

fetch的使用

1. 安装

npm install whatwg-fetch --save

2. 引入

import fetch from 'whatwg-fetch';

3. get请求

fetch(url)
	.then( res=>res.json() ) 
	.then( data=>{
           console.log(data)
           // 逻辑处理
        } )
	.catch( err=>console.log(err) )

res就是完整的响应消息；res.body是流对象。

4. post请求

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

5. 上传文件请求

let data = new FormData();
data.append('headfile',headfile);
fetch(url, {
	method: 'POST',//请求方法
	body: data //请求主体
})
	.then( res=>res.json() )
	.then( data=>{
           console.log(data)
           // 逻辑处理
        } )
	.catch( err=>console.log(err) )

6. 总结

在需要必须在header参数里面加上credentials: 'include'，才会如xhr一样将当前cookies带到请求中去
fetch返回的是一个未处理的方法集合，我们可以通过这些方法得到我们想要的数据类型。如果我们想要json格式，就执行response.json(),如果我们想要字符串就response.text()；

优缺点

fetch整体用下来，还是相对好上手的，优点有很多：

语法比较简介，更加语义化；
它是基于标准的promise实现的，返回值是一个promise对象，支持async/await
更加底层化一些，提供的API比较丰富
脱离了XMLHttpRequest，符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里，更加底层，提供的API丰富（request, response），脱离了XHR，是ES规范里新的实现方式当然，fetch也是有一些缺点的：
fetch只对网络请求报错，对400，500都当做成功的请求，在项目中使用的时候需要封装去处理
fetch默认不会带cookie，需要添加配置项
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
fetch没有办法原生监测请求的进度，而XMLHttpRequest可以

React的学习（九）——fetch的简单使用