兼容性
在介绍之前，先看看目前主流浏览器对 Fetch API 的支持情况：
Fetch 的支持目前还处于早期的阶段，在 Firefox 39 以上，和 Chrome 42 以上都被支持了。
如果你现在就想使用它，还可以用 Fetch Polyfil，用于支持那些还未支持 Fetch 的浏览器。
在使用 Fetch 之前，也可以对其进行功能性检测：
if(self.fetch) {
// run my fetch request here
} else {
// do something with
XMLHttpRequest?
}简单的fetching示例
在 Fetch API 中，最常用的就是 fetch() 函数。它接收一个URL参数，返回一个 promise 来处理 response。response 是一个 Response 对象：
fetch("/data.json").then(function(res)
{
// res instanceof Response ==
true.
if (res.ok) {
res.json().then(function(data) {
console.log(data.entries);
});
} else {
console.log("Looks like the response wasn't
perfect, got status", res.status);
}
}, function(e) {
console.log("Fetch failed!", e);
});fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象。如果是提交一个 POST 请求，代码如下：
fetch("http://www.example.org/submit.php",
{
method: "POST",
headers: {
"Content-Type":
"application/x-www-form-urlencoded"
},
body:
"firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(function(res) {
if (res.ok) {
//res.ok用于检测请求是否成功
console.log("Perfect! Your settings are
saved.");
} else if (res.status == 401) {
console.log("Oops! You are not
authorized.");
}
}, function(e) {
console.log("Error submitting
form!");
});如果遇到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。
Fetch 实现了四个接口：GlobalFetch、Headers、Request 和 Response。GloabaFetch 就只包含了一个 fetch 方法用于获取网络资源，其它三个直接对应了相应的 HTTP 概念。此外，在 request/reponse 中，还混淆了 Body。
Headers
Headers 接口允许定义 HTTP 的请求头(Request.headers)和响应头(Response.headers)。一个 Headers 对象是一个简单的多名值对：
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type",
"text/plain");
myHeaders.append("Content-Length",
content.length.toString());
myHeaders.append("X-Custom-Header",
"ProcessThisImmediately");也可以传一个多维数组或者对象字面量：
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length":
content.length.toString(),
"X-Custom-Header":
"ProcessThisImmediately",
});此外，Headers 接口提供了 set ，delete 等 API 用于检索其内容：
console.log(reqHeaders.has("Content-Type")); //
true
console.log(reqHeaders.has("Set-Cookie")); //
false
reqHeaders.set("Content-Type",
"text/html");
reqHeaders.append("X-Custom-Header",
"AnotherValue");
console.log(reqHeaders.get("Content-Length"));
// 11
console.log(reqHeaders.getAll("X-Custom-Header")); //
["ProcessThisImmediately", "AnotherValue"]
reqHeaders.delete("X-Custom-Header");
console.log(reqHeaders.getAll("X-Custom-Header")); //
[]虽然有些操作仅在 ServiceWorkers 中使用，但相对于 XHR，其本身提供了非常方便的操作 Headers 的 API。
出于安全原因，有些 header 字段的设置仅能通过 User Agent 实现，不能通过编程设置：请求头禁置字段 和 响应头禁置字段。
如果使用了一个不合法的 HTTP Header 属性名或者写入一个不可写的属性，Headers 的方法通常都抛出 TypeError 异常：
var myResponse = Response.error();
try {
myResponse.headers.set("Origin",
"http://mybank.com");
} catch(e) {
console.log("Cannot pretend to be a
bank!");
}最佳实践是在使用之前检查 content type 是否正确，比如：
fetch(myRequest).then(function(response)
{
if(response.headers.get("content-type") ===
"application/json") {
return response.json().then(function(json)
{
// process your JSON further
});
} else {
console.log("Oops, we haven't got
JSON!");
}
});由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收，并且规定了哪些参数是可写的，Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被改变。
可能的值如下：
none：默认的
r
equest：从 request 中获得的
headers（Request.headers）只读
request-no-cors：从不同域（Request.mode no-cors）的
request 中获得的 headers 只读
response：从 response 中获得的
headers（Response.headers）只读
immutable：在 ServiceWorkers 中最常用的，所有的 headers
都只读
Request
Request 接口定义了通过HTTP请求资源的request格式，一个简单请求构造如下：
var req = new
Request("/index.html");
console.log(req.method); // "GET"
console.log(req.url); //
"http://example.com/index.html"
console.log(req.headers);
//请求头和 fetch() 一样，Request 接受第二个可选参数，一个可以控制不同配置的 init 对象：
var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' ,
credentials: true,
body: "image data"};
var myRequest = new
Request('flowers.jpg',myInit);
fetch(myRequest,myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL =
URL.createObjectURL(myBlob);
myImage.src = objectURL;
});mode 属性用来决定是否允许跨域请求，以及哪些response 属性可读。mode 可选的属性值：
same-origin：请求遵循同源策略
no-cors: 默认值，允许来自CDN的脚本、其他域的图片和其他一些跨域资源（前提条件是 method 只能是HEAD,GET或者POST）
cors ：允许跨域，请求遵循 CROS协议
credentials 枚举属性决定了cookies 是否能跨域得到，这与 XHR 的 withCredentials 标志相同，但是只有三个值，分别是omit（默认）,same-origin以及include。
Response
Response 实例是在 fentch() 处理完 promises 之后返回的，它的实例也可用通过 JavaScript 来创建, 但只有在 ServiceWorkers 中才真正有用。当使用 respondWith() 方法并提供了一个自定义的response来接受request时:
var myBody = new Blob();
addEventListener('fetch', function(event)
{
event.respondWith(new Response(myBody,
{
headers: { "Content-Type" : "text/plain"
}
});
});Response() 构造方法接受两个可选参数—response的数据体和一个初始化对象(与 Request() 所接受的init参数类似.)
最常见的response属性有:
Response.status — 整数(默认值为200)
为response的状态码.
Response.statusText —
字符串(默认值为OK),该值与HTTP状态码消息对应.
Response.ok — 如上所示,
该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.
Response.headers — 响应头
Response.type — 响应类型，如：basic/ cors
/error
Body
Request 和 Response 都实现了 Body 接口，在请求过程中，二者都会携带 Body，其可以是以下任何一种类型的实例：
ArrayBuffer
ArrayBufferView
Blob/file
URLSearchParams
FormData
此外，Request 和 Response 都为他们的body提供了以下方法，这些方法都返回一个Promise对象:
arrayBuffer()
blob()
json()
text()
formData()
以上就是XML Http Request最新替代技术—— Fetch 的内容，更多相关内容请关注PHP中文网（www.php.cn）！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
程序员必备接口测试调试工具：点击使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
网页生成APP，用做网站的技术去做APP：立即创建
手机网站开发APP、自助封装APP、200+原生模块、2000+映射JS接口按需打包
相关文章
相关视频
