今天使用公司的新框架，发现axios在请求的时候，框架会在请求前面自动加上地址，又不太好改动公司的框架核心，于是使用原生的Fetch API。
Fetch API 是是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。你可能听说过 Fetch API 其中的一个好处，就是你不需要在使用它的时候额外加载一个外部资源。确实如此！但是目前它还没有被浏览器完全支持，所以你仍然需要一个 polyfill。使用这个 API 还有很多别的注意事项，这也是为什么大家现阶段还是更喜欢 axios 多一些。当然这个事情在未来可能会发生改变。
目前的能用的浏览器版本
官方文档地址
1、基本用法
fetch()的功能与 XMLHttpRequest 基本相同，但有三个主要的差异。
（1）fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
（2）fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。
（3）fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。
在用法上，fetch()接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。它的基本用法如下。
fetch(url)
.then(...)
.catch(...)1.1、最简单典型的用法
fetch('url')
.then(function(response) {
response.json().then(function(data) {
console.log(data);
});
})
.catch(function(err) {
console.log('Fetch Error : %S', err);
})以上示例可以看出，fetch()接收到的response是一个 Stream 对象，response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象。
1.2Fetch API跟Promises的关系
console.log(fetch('1.php')); // 返回一个Promise对象两者关系就一句话：fetch()本身就返回一个Promise对象。所以，它就可以用Promises的所有方法。
Promise 可以使用 await 语法改写，使得语义更清晰
async function get() {
let url = '';
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}上面示例中，await语句必须放在try...catch里面，这样才能捕捉异步操作中可能发生的错误。
后文都采用await的写法，不使用.then()的写法。
2、fetch的参数
第一个参数：毫无疑问是要获取资源的URL。
第二个参数：options对象，包括：
- method: 请求使用的方法，如 GET、``POST。
- headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
- body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
- mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
- credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
- cache: 请求的 cache 模式: default、 no-store 、 reload 、 no-cache 、 force-cache或者 only-if-cached 。
- redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
- referrer: 一个 USVString ，可以是 no-referrer、client或一个URL。默认是 client。
- referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
- integrity: 包括请求的 subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。
上面诸多option中，其实常用的就是method、headers、body以及mode等。