JavaScript中的Fetch函数
JavaScript中的Fetch函数
Fetch API提供了⼀个JavaScript接⼝，⽤于访问和操作Http管道的⼀些具体的部分，例如请求和响应。还提供⼀个fetch()⽅法，该⽅法提供⼀种简单，合理的⽅式来跨⽹络异步获取资源。
这种功能以前是使⽤XMLHttpRequest实现的。Fetch挺了⼀个更理想的替代⽅案，可以很容易的被其他技术使⽤。例如Service Workers。Fetch还提供了专门的逻辑空间来定义其他与Http相关的概念，例如Cors和http扩展。
注意：fetch规范与Jquery.ajax()主要有三种⽅式不同：
1.当接收到⼀个代表错误的Http状态码时，从fetch()返回的Promise不会被标记为reject，即使响应的http状态码时404或500.它将Promise状态标记为resolve，但是会将resolve的返回值ok属性设置为false。仅当⽹络故障时或者请求被阻⽌时，才会标记为reject。
2.fetch()不会接受跨域的cookies，也不能使⽤fetch建⽴跨域会话，其他⽹站的set-cookies头部字段将会被⽆视。
年tch不会发送cookies，除⾮使⽤了credentials的初始化选项。2017年8⽉25⽇后，默认的credentials政策更改为same-origin。fixfox在61.0b134版本进⾏了修改。
⽰例：
fetch(url)
.then(function(response){return response.json()})
.then(function(myJson){console.log(myJson)})
⽰例中通过⽹络获取⼀个json⽂件并将其打印到控制台。
最简单的⽤法只提供⼀个茶杯上个⽉⽤来指明fetch到的资源路径，然后返回⼀个包含响应结果的promise(⼀个Response对象)。
它只是⼀个Http响应并不是真的JSON，为了获取JSON的内容，还需要使⽤json()⽅法，在Body的mixin中定义，被Request和Response对象实现。
带两个参数的⽰例：
/
/ Example POST method implementation:
postData('example/answer', {answer: 42})
.then(data => console.log(data)) // JSON from `response.json()` call
.catch(error => (error))
function postData(url, data) {
// Default options are marked with *
return fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
}
发送带凭证的请求：
fetch('example', {
credentials: 'include'
})
如果只想在请求URL与调⽤脚本位于同⼀起源处时发送凭证，添加credentials:'same-origin'
// The calling script is on the origin 'example'
fetch('example', {
credentials: 'same-origin'
})
为确保浏览器不在请求中包含凭证，使⽤omit
fetch('example', {
credentials: 'omit'
})
上传JSON数据⽰例：
var url = 'example/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.
catch(error => ('Error:', error))
.then(response => console.log('Success:', response));
上传⽂件⽰例：
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('example/profile/avatar', {
method: 'PUT',
body: formData
})
.
then(response => response.json())
.catch(error => ('Error:', error))
.then(response => console.log('Success:', response));
上传多个⽂件⽰例：
var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]");
formData.append('title', 'My Vegas Vacation');
// formData 只接受⽂件、Blob 或字符串，不能直接传递数组，所以必须循环嵌⼊
for (let i = 0; i < photos.files.length; i++) {
formData.append('photo', photos.files[i]);
}
fetch('example/posts', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => ('Error:', error));
检测请求是否成功：
如果⽹络故障，fetch()promise将会reject戴上⼀个TypeError对象，虽然这种情况经常遇到权限问题或者是类似问题，如404不是⼀个⽹络故障。想精确的判断fetch是否成功，需要promise resolved的情况，此时再判断Response.ok是不是true。
fetch('flowers.jpg').then(function(response) {
if(response.ok) {
return response.blob();
}
throw new Error('Network response was not ok.');
}).then(function(myBlob) {
var objectURL = ateObjectURL(myBlob);
myImage.src = objectURL;
}).catch(function(error) {
console.log('There has been a problem with your fetch operation: ', ssage);
});
⾃定义请求对象：
除了传给fetch⼀个资源的地址，还可以通过Request来构造函数来创建⼀个request对象，然后再传给fetch。
var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest).then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = ateObjectURL(myBlob);
myImage
Request()和fetch()接受同样的参数。你甚⾄可以传⼊⼀个已存在的 request 对象来创造⼀个拷贝：
var anotherRequest = new Request(myRequest,myInit);
Headers⽰例：
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", String());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
多维数组或者对象字⾯量：
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": String(),
"X-Custom-Header": "ProcessThisImmediately",
});
json值的类型有哪些它的内容可以被获取：
console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");
console.("Content-Length")); // 11
console.All("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
myHeaders.delete("X-Custom-Header");
console.All("X-Custom-Header")); // [ ]
虽然⼀些操作只能在中使⽤，但是它提供了更⽅便的操作 Headers 的 API。
如果使⽤了⼀个不合法的HTTP Header属性名，那么Headers的⽅法通常都抛出 TypeError 异常。如果不⼩⼼写⼊了⼀个不可写的属性，也会抛出⼀个 TypeError 异常。除此以外的情况，失败了并不抛出异常。例如：
var myResponse = ();
try {
myResponse.headers.set("Origin", "mybank");
} catch(e) {
console.log("Cannot pretend to be a bank!");
}
最好在在使⽤之前检查内容类型content-type是否正确，⽐如：
fetch(myRequest).then(function(response) {
if(("content-type") === "application/json") {
return response.json().then(function(json) {
// process your JSON further
});
} else {
console.log("Oops, we haven't got JSON!");
}
});
Guard
由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收，并且规定了哪些参数是可写的，Headers 对象有⼀个特殊的guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。
可能的值如下：
none：默认的
request：从 request 中获得的 headers（）只读
request-no-cors：从不同域（no-cors）的 request 中获得的 headers 只读
response：从 response 中获得的 headers（）只读
immutable：在 ServiceWorkers 中最常⽤的，所有的 headers 都只读。
Response 对象
如上所述，实例是在fetch()处理完 promise 之后返回的。
你会⽤到的最常见的 response 属性有:
— 整数（默认值为200）为response的状态码。
— 字符串（默认值为"OK"），该值与 HTTP 状态码消息对应。
— 如上所⽰，该属性是来检查response的状态是否在 200 - 299（包括200 和 299）这个范围内。该属性返回⼀个。
它的实例也可⽤通过 JavaScript 来创建，但只有在中才真正有⽤，当使⽤⽅法并提供了⼀个⾃定义的 response 来接受 request 时：var myBody = new Blob();
addEventListener('fetch', function(event) {
headers: { "Content-Type" : "text/plain" }
});
});
构造⽅法接受两个可选参数—— response 的数据体和⼀个初始化对象（与所接受的 init 参数类似。）
Body
不管是请求还是响应都能够包含 body 对象。body 也可以是以下任意类型的实例。
(Uint8Array等)
/File
string
类定义了以下⽅法（这些⽅法都被和所实现）以获取 body 内容。这些⽅法都会返回⼀个被解析后的对象和数据。
⽐起XHR来，这些⽅法让⾮⽂本化的数据使⽤起来更加简单。
请求体可以由传⼊ body 参数来进⾏设置：
var form = new ElementById('login-form'));
fetch("/login", {
method: "POST",
body: form
})
特性检测
Fetch API 的⽀持情况，可以通过检测, ,  或是否在或域中。例如：
if(self.fetch) {
// run my fetch request here
} else {
// do something with XMLHttpRequest?
}
Polyfill
如果要在不⽀持的浏览器中使⽤ Fetch，可以使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。