前言
Fetch API是新的ajax解决方案，用于解决古老的XHR对象不能实现的问题，Fetch API 提供了一个获取资源的接口（包括跨域请求），任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。
主要优点：
- 语法简单，更加语义化
- 基于标准的Promises实现，支持async/await
概念和用法
Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是service workers、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。
它同时还为有关联性的概念，例如CORS和HTTP原生头信息，提供一种新的定义，取代它们原来那种分离的定义。
发送请求或者获取资源，需要使用 WindowOrWorkerGlobalScope.fetch 方法。它在很多接口中都被实现了，更具体地说，是在Window 和 WorkerGlobalScope接口上。因此在几乎所有环境中都可以用这个方法获取到资源。
fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。你也可以传一个可选的第二个参数init（参见 Request）。
一旦 Response 被返回，就有一些方法可以使用了，比如定义内容或者处理方法（参见 Body）。
你也可以通过 Request() 和 Response() 的构造函数直接创建请求和响应，但是我们不建议这么做。他们应该被用于创建其他 API 的结果（比如，service workers 中的 FetchEvent.respondWith）。
注意：更多关于 Fetch API 的用法，参考 Using Fetch，以及一些概念 Fetch basic concepts。
最简单典型的用法
本文假设一个服务器环境，有一个test.html和一个test.php。
fetch('test.php') .then(function(res) { res.json().then(function(data) { console.log(data); }); }) .catch(function(err) { console.log('Fetch Error : %S', err); })
Fetch API跟Promises的关系
console.log(fetch('test.php')); // 返回一个Promise对象
两者关系就一句话：fetch()本身就返回一个Promise对象。所以，它就可以用Promises的所有方法。
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 ofno-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url 。integrity: 包括请求的 subresource integrity 值 （ 例如：sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。
上面诸多option中，其实常用的就是method、headers、body以及mode等。
注意：更多关于 Fetch API 的用法，参考 Using Fetch，以及一些概念 Fetch basic concepts。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/16520.html