前言
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。