fetch 是接收的意思，不管是世界上最好的语言 php 、还是使用最多的数据库 mysql 都有 原生的 fetch 函数，其它语言基本都有，今天说的就是 JavaScript 的原生函数 fetch.
Fetch 是什么？
目前来说，它是替代 Ajax 的一个原生解决方案，一般来说需要支持一定的 ES6 运行环境，好消息是大多数浏览器都能支持，坏消息是，如果你要支持IE，那就还不适用，不过可以用第三方的 Fetch 包来兼容。
你一定知道 Ajax ，它是上世纪90年代的 XMLHttpRequest 技术规范演化而来，用来发送网络请求的 浏览器原生API，如果写过原生 Ajax 的同学肯定眼熟下面一段代码：
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
// code for old IE browsers
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
如果把以上代码转为 Fetch 的写法，就是
fetch('filename').then(resp=>document.getElementById("demo").innerHTML = resp.body)
高级写法
通常，我们很少自己手写 Ajax ，以 jQuery 为例，通常写法如下
const success = resp => console.log('success');
const fail = resp => console.log('fail');
$.ajax('test.json')
.done(success)
.fail(fail);
如果使用 fetch 的话，它的写法就会变成这样
fetch('test.json')
.then(success)
.then(fail);
貌似没怎么区别，但实际上来说， $.ajax 方法返回的是一个 JQuery.jqXHR 对象，而 fetch 方法返回的是一个 Promise<Response> 对象，由于 Promise 是 ES6 自带的标准对象，所以，我们可以使用 async / await 的组合写法来写这个方法。
// 控制台会依次打印
console.log('Load'); // 1. Load
async function get(url){
let response = await fetch(url);
console.info('Url - fetched'); // 4. Url - fetched
console.log(response); // 5. Response
}
console.log('Start Fetch URL'); // 2. Start Fetch
get('test.json');
console.log('Todo anysc next'); // 3. Todo anysc next
虽然比上面的要多几行，但从设计理念上来说，代码已经实现了业务上的分离，和 yield 关键字也可以搭配，灵活度大于上面的写法，阅读起来降低了一层层次感。
API
Fetch API 包含四个类对象 : Request 、Response 、 Headers 、Body 。
如上，如果只是简单的 GET 一个资源，可以使用 fetch(url:string) ，如果是要自己构造请求头、请求体或是其它参数，就应该使用 fetch(req:Request) 或是 fetch(url:string, initParam:Object) 了,支持的参数如下
| 参数 | 类型 | 说明 |
|---|---|---|
| method | string | GET/POST/PUT 等等 |
| headers | objcet/Headers | 一个 object 对象，或者一个 Headers 对象 |
| body | any | 请求体 |
| mode | string | 请求模式 ： navigate、 same-origin 、 no-cors 、 cors |
| credentials | string | 携带认证模式：omit 、same-origin 、include |
| cache | string | 缓存模式 ：default、no-store、reload、no-cache、force-cache |
| redirect | string | 遇到转向时： follow、error、manual |
| referrer | string | refer 字符器 |
| integrity | string | 子资源 |
| keepalive | boolean | 是否保持链接 |
至于 Request 对象，实际上功能和 initParam 差不多，Headers 对象实际上就是一个针对性的映射 Map，Response 对象一般就是用来读取 响应码Status、Headers,Body 的一些内容，不需要多讲。
而 Body 对象，就自带也各种处理函数，可以将内容体方便的做各种转换：
Body.arrayBuffer()
Body.blob()
Body.formData()
Body.json()
Body.text()