该方法是一个在实验中的方法，但是目前来说受到的关注度很高，甚至有【传统 Ajax 已死，Fetch 永生】这样的标题，但是目前来说世面上的浏览器对象fetch的支持并不理想，尤其如果在B端使用的话需导入大量的库对其进行支持，个人认为该方法虽然相比传统的Ajax方式有较大的改进，但在目前环境可能出现的坑会有很多，所以目前不会在实际工作中使用，
fetch方法用于发起获取资源的请求，它返回一个Promise，这个Promise会在请求响应后resolve，当遇到网络错误时fetch()返回的promise会被reject，由于返回的是Promise对象，所以可以直接使用异步回调
在使用fetch时需要传入参数
fetch(url [,init])
url:必传参数，该参数表示我们要发起请求的后台接口地址 / 或者一个Request对象
init:可选参数，格式为一个对象，作为本次请求的配置对象
fetch("/api/agent/job/listPositions")
.then(res=>{
if(res.status>=200&&res.status<300||res.status==304) {
console.log(res); //Response
}else{
console.log("出现一个问题，状态码为"+res.status)
}
})
.catch(res=>{
console.log(res);
})
需要注意的时成功的fetch不仅需要返回的promise被resolve，还要包括返回的Response对象的ok状态为true，但是404返回时会被判断为请求成功，不会被作为网络错误处理，所以注意在接收到数据时记得判断状态是否为404
init参数和Request对象
使用fetch，可以在init参数中对本次请求进行配置，init中包含希望被包括到请求中的各种自定义选项
-
method：请求的方法，例如GET,POST
fetch(url,{ method:POST, }) -
headers：配置请求头
fetch(url,{ method:POST, headers: { 'Cache-Control': 'no-cache' }, }) -
body：在该属性中设置需要提交的数据信息
var params={"city_name":"上海市","size":"10","page":"1"} fetch(url,{ method:POST, headers: { 'Cache-Control': 'no-cache' }, body:JSON.stringify(params) }) -
mode:可以设置cors，no-cors，same-origin
fetch(url,{ method:POST, headers: { 'Cache-Control': 'no-cache' }, mode:'cors' }) -
credentials:omit、same-origin 或者 include
默认情况下，fetch不会从服务端接收或发送任何cookies，如果站点依赖于用户session，则会导致未经认证的请求，这时需要我们设置credentials属性
同样，如果我们想要使用Request对象进行配置，如下
var request=new Request('url',{
method:POST,
headers: {
'Cache-Control': 'no-cache'
},
mode:'cors'
})
fetch(request).then(function(){});
注意，Request和fetch的签名是一致的，这在Service Workers中很有用，但是其他情况两者是一样的
返回值Response
Response代表响应，
Response提供如下方法:
- clone() 创建一个新的Response克隆对象
- error()返回一个新的、与网络错误相关的Response对象
- redirect()重定向，使用新的URL创建新的Response对象
- blob()返回一个promise，resolves是一个FormData对象
- json()返回一个promise，resolves是一个JSON对象
- text()返回一个promise，resolves是一个文本对象
下面我们说一些我们工作中常用的
-
处理json
fetch("/api/agent/job/listPositions") .then(res=>{ console.log(res.json()); //Promise })通过json()方法可以得到一个Promise对象，该方法可以将原始的Response对象转化为javascript对象格式
-
处理text
fetch("/api/agent/job/listPositions") .then(res=>{ console.log(res.text()); })通过text()方法可以得到一个Promise对象，可以得到解析后的文本结果
-
处理图像
var myImage = document.querySelector('img'); fetch('https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=9d5f84f83312b31bd361c57be7715d1f/03087bf40ad162d91c017aa31bdfa9ec8b13cda6.jpg') .then(function(response) { var res=response.blob(); return res; }) .then(function(myBlob) { console.log(myBlob); var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });通过blob()方法可以得到一个Promise对象，该方法用于处理我们获取的图像信息
以上只是部分个人觉的比较重要的API整理，目前来说本人并没有在实际项目中使用过feath，也只是做了一些测试的DOM，前不久阿里将部分项目由$.ajax的方式大规模替换为feath，也许之后真的会是feath永生呢，笑
