1. 前情提要
这是一个实验性质的api如果使用，需要注意浏览器兼容性，ff34+(实际测试时发现在39开始才能使用)，chrome42+，safari10+。
本文内代码仅仅保证在chrome53-64bit环境下正常运行，本文内代码经过测试并可以正常运行，但不保证在其他环境中因不可控因素导致的错误情况发生。
写这篇文章，主要是为了记录一下fetch api的学习情况，这个名字取得让人不太舒服(fetch data && ‘fetch’ data)，在看英语文档的时候一度被误解，此外我一开始以为这是一个独立的第三方api，但是没有想到的是这是一个浏览器原声支持的api。
2. fetch api出现的缘由
大抵在学习的初期，所有的js课程都会不厌其烦的教授关于xhr的内容，大抵操作XMLHttpRequest 总是让人不太愉快的是吧！是的复杂的ajax操作令初学者望而却步，说实话我也背不出那一串串冗长的代码段，为了解决这个问题，就有了fetch。
相较之XMLHttpRequest，fetch在对数据的处理和操作上显得更为友好，在使用上和jquery的ajax方法略有相同。
3. fetch 的interface
fetch在使用上依赖以下接口：
- Headers
- Request
- Response
通常而言，headers不需要额外设置直接使用new Headers()即可，当然和jquery一样我们可以对header作出以下复杂的设定
3.1 Header
3.1.0 Headers()
如何声明一个headers
var myHeaders = new Headers();3.1.1 Headers.append()
使用append为headers添加header
myHeaders.append(name,value);append提供一个方法来对headers中不存在的header作出设定，如果已经存在则不会作出任何改变，而是会额外增加一个位置来储存。 此外，如果设置一些不被允许的header将会抛出一个类型错误（typeError）。
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.get('Content-Type')
//"image/jpeg"
myHeaders.append('Content-Type', 'text/html');
myHeaders.get('Content-Type')
//"image/jpeg"
myHeaders.getAll('Content-Type');
//["image/jpeg","text/html"]如果需要改变一个以及存在的值可以使用Headers.set()方式和append完全一样
myHeaders.set(name,value);3.1.2 Headers.get();
使用get方法获取headers的某个header
myHeaders.get(name);值得注意的是在翻看api的时候发现指出了如果使用了非HTTP header的name将会抛出一个typeerror的错误，但是在实际测试中却没有找到发生的情况，这里的声明可能只是针对设置时而言的。
当然除了get以外如果需要获取全部的header，那么可以使用Headers.getAll()方法（这在前文已经出现过了不多赘述）
3.2 Request && response
3.2.1 创建一个Request
var myRequest = new Request(input, init);在input中允许两种形式的输入
- 另外一个request，这将是的本个request成为另外一个request的复制品
- 一个你希望拉取的数据或者资源的直接地址
在使用第二种方法时，可能需要添加init，默认的其设置为GET方法，没有携带任何header信息。
- method : GET/POST/DELETE/PUT
- headers : 就是头部信息，可以不填，需要使用Headers创建的对象或者字节序列字符串(不推荐，操作不便)
- body : 可以后面列出的数据类型中的任意一种Blob, BufferSource, FormData, URLSearchParams, USVString
其他的方法并未全部列出以上方法对于常见的ajax请求已经基本满足需求了，其余的内容可以参见mdn,对于request而言其他的多数属性都是read only的，可以自己查阅mdn
3.2.2 读取一个response
在使用response前必须先提出一句重要的内容Response实现了一个基于Body的函数，而Body仅仅只能被调用一次，所以在第二次调用时你将会获得一个完全空白的string或者arrayBuffer
- type : GET/POST/DELETE/PUT
- url : 地址
- useFinalURL : 是否是最终地址，返回一个boolean
- status : 状态码
- ok : 是否成功的（200-299以内代表true）
- statusText : status （比如ok什么的）
- headers : 头部信息
这些是常用的功能,此外还有一些方法用来处理回执信息，具体的信息可以参见
- clone() : 创建一个克隆（通过这个方法可以让你多次访问’同’一个回执信息）
- error() : 这将会创建一个全新的response对象来处理error问题(网络错误)
- redirect() : 使用一个url来，创建一个全新的Response对象来(但是我没有找到任何关于这个方法的使用例子，并且在chrome实验是url并没有被正确的获取到)
- arrayBuffer() : 返回一个promise
- blob() : 返回一个promise
- formData() : 返回一个promise
- json() : 返回一个promise
- text() : 返回一个promise
受限于篇幅这里建议还是前往mdn前往查看
4 fetch
现在终于可以正式开始讲述一下fetch了，有了上面那些我们就可以使用fetch做一些ajax操作了，同promise类似，fetch支持promise的链式操作，这里我照抄一段MDN上给出的例子
var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
fetch('flowers.jpg',myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});这就是最简单的fetch例子，当然咯，我们一样也可以使用catch去捕获一些错误。
fetch('flowers.jpg',myInit)
.then(function(response){
// do something for res
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});下面给出一个简单的例子来实现带参数的执行方法：
// 给予一个json 的数据形式
fetch('https://davidwalsh.name/submit-json', {
method: 'post',
body: JSON.stringify({
username: document.getElementById('username').value
password: document.getElementById('password').value
})
});
// 或者直接给予一个表单形式
fetch('https://davidwalsh.name/submit', {
method: 'post',
body: new FormData(document.getElementById('simple-form'))
});4. 除此之外就是Guard
我也不是太懂这个东西到底起了什么作用，如果有明白的可以发送邮件给我或者底下留言，我会尽快回复。
5. 那么写在最后
就这样，没有别的东西了！如果说还需要了解的话，就是去好好看看promise的api！
本文标题：fetch api
永久链接：https://iceprosurface.com/2016/10/12/2016/2016-10-12-fetch-api/
作者授权：本文由 icepro 原创编译并授权刊载发布。
版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。