fetch基本⽤法
⼀、基本⽤法
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(...)
下⾯是⼀个例⼦，从服务器获取 JSON 数据。
fetch('')
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log('Request Failed', err));
上⾯⽰例中，fetch()接收到的response是⼀个，response.json()是⼀个异步操作，取出所有内容，并将其转为 JSON 对象。
Promise 可以使⽤ await 语法改写，使得语义更清晰。
async function getJSON() {
let url = '';
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}
上⾯⽰例中，await语句必须放在atch⾥⾯，这样才能捕捉异步操作中可能发⽣的错误。
后⽂都采⽤await的写法，不使⽤.then()的写法。
⼆、Response 对象：处理 HTTP 回应
2.1 Response 对象的同步属性
fetch()请求成功以后，得到的是⼀个。它对应服务器的 HTTP 回应。
const response = await fetch(url);
前⾯说过，Response 包含的数据通过 Stream 接⼝异步读取，但是它还包含⼀些同步属性，对应 HTTP 回应的标头信息（Headers），可以⽴即读取。
async function fetchText() {
let response = await fetch('/');
console.log(response.status);
console.log(response.statusText);
}
上⾯⽰例中，response.status和response.statusText就是 Response 的同步属性，可以⽴即读取。
标头信息属性有下⾯这些。
Response.ok
Response.ok属性返回⼀个布尔值，表⽰请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。
Response.status
Response.status属性返回⼀个数字，表⽰ HTTP 回应的状态码（例如200，表⽰成功请求）。
Response.statusText
Response.statusText属性返回⼀个字符串，表⽰ HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）。
Response.url
Response.url属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。
basic：普通请求，即同源请求。
cors：跨域请求。
error：⽹络错误，主要⽤于 Service Worker。
opaque：如果fetch()请求的type属性设为no-cors，就会返回这个值，详见请求部分。表⽰发出的是简单的跨域请求，类
似<form>表单的那种跨域请求。
opaqueredirect：如果fetch()请求的redirect属性设为manual，就会返回这个值，详见请求部分。
2.2 判断请求是否成功
fetch()发出请求以后，有⼀个很重要的注意点：只有⽹络错误，或者⽆法连接时，fetch()才会报错，其他情况都不会报错，⽽是认为请求成功。
这就是说，即使服务器返回的状态码是 4xx 或 5xx，fetch()也不会报错（即 Promise 不会变为rejected状态）。
只有通过Response.status属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功。请看下⾯的例⼦。
async function fetchText() {
let response = await fetch('/');
if (response.status >= 200 && response.status < 300) {
return ();
} else {
throw new Error(response.statusText);
}
}
上⾯⽰例中，response.status属性只有等于 2xx （200~299），才能认定请求成功。这⾥不⽤考虑⽹址跳转（状态码为 3xx），因为fetch()会将跳转的状态码⾃动转为 200。
另⼀种⽅法是判断response.ok是否为true。
if (response.ok) {
// 请求成功
} else {
// 请求失败
}
2.3 Response.headers 属性
Response 对象还有⼀个Response.headers属性，指向⼀个，对应 HTTP 回应的所有标头。
Headers 对象可以使⽤f循环进⾏遍历。
const response = await fetch(url);
for (let [key, value] of response.headers) {
console.log(`${key} : ${value}`);
}
// 或者
for (let [key, value] of ies()) {
console.log(`${key} : ${value}`);
}
Headers 对象提供了以下⽅法，⽤来操作标头。
<()：根据指定的键名，返回键值。
Headers.has()：返回⼀个布尔值，表⽰是否包含某个标头。
Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。
Headers.append()：添加标头。
Headers.delete()：删除标头。
fetch最佳用法Headers.keys()：返回⼀个遍历器，可以依次遍历所有键名。
Headers.values()：返回⼀个遍历器，可以依次遍历所有键值。
Headers.forEach()：依次遍历标头，每个标头都会执⾏⼀次参数函数。
上⾯的有些⽅法可以修改标头，那是因为继承⾃ Headers 接⼝。对于 HTTP 回应来说，修改标头意义不⼤，况且很多标头是只读的，浏览器不允许修改。
这些⽅法中，最常⽤的是()，⽤于读取某个标头的值。
let response =  await  fetch(url);
('Content-Type')
// application/json; charset=utf-8
Headers.keys()和Headers.values()⽅法⽤来分别遍历标头的键名和键值。
// 键名
for(let key of myHeaders.keys()) {
console.log(key);
}
// 键值
for(let value of myHeaders.values()) {
console.log(value);
}
Headers.forEach()⽅法也可以遍历所有的键值和键名。
let response = await fetch(url);
response.headers.forEach(
(value, key) => console.log(key, ':', value)
);
2.4 读取内容的⽅法
Response对象根据服务器返回的不同类型的数据，提供了不同的读取⽅法。
<()：得到⽂本字符串。
response.json()：得到 JSON 对象。
response.blob()：得到⼆进制 Blob 对象。
response.formData()：得到 FormData 表单对象。
response.arrayBuffer()：得到⼆进制 ArrayBuffer 对象。
上⾯5个读取⽅法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。
<()
<()可以⽤于获取⽂本数据，⽐如 HTML ⽂件。
const response = await fetch('/users.html');
const body = ();
document.body.innerHTML = body
response.json()
response.json()主要⽤于获取服务器返回的 JSON 数据，前⾯已经举过例⼦了。
response.formData()
response.formData()主要⽤在 Service Worker ⾥⾯，拦截⽤户提交的表单，修改某些数据以后，再提交给服务器。
response.blob()
response.blob()⽤于获取⼆进制⽂件。
const response = await fetch('flower.jpg');
const myBlob = await response.blob();
const objectURL = ateObjectURL(myBlob);
const myImage = document.querySelector('img');
myImage.src = objectURL;
上⾯⽰例读取图⽚⽂件flower.jpg，显⽰在⽹页上。
response.arrayBuffer()
response.arrayBuffer()主要⽤于获取流媒体⽂件。
const audioCtx = new window.AudioContext();
const source = ateBufferSource();
const response = await fetch('');
const buffer = await response.arrayBuffer();
const decodeData = await audioCtx.decodeAudioData(buffer);
source.buffer = buffer;
source.loop = true;
上⾯⽰例是response.arrayBuffer()获取⾳频⽂件，然后在线播放的例⼦。
2.5 Response.clone()
Stream 对象只能读取⼀次，读取完就没了。这意味着，前⼀节的五个读取⽅法，只能使⽤⼀个，否则会报错。
let text =  ();
let json =  await response.json();  // 报错
上⾯⽰例先使⽤了()，就把 Stream 读完了。后⾯再调⽤response.json()，就没有内容可读了，所以报错。
Response 对象提供Response.clone()⽅法，创建Response对象的副本，实现多次读取。
const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();
const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();
image1.src = ateObjectURL(myBlob1);
image2.src = ateObjectURL(myBlob2);
上⾯⽰例中，response.clone()复制了⼀份 Response 对象，然后将同⼀张图⽚读取了两次。
Response 对象还有⼀个direct()⽅法，⽤于将 Response 结果重定向到指定的 URL。该⽅法⼀般只⽤在 Service Worker ⾥⾯，这⾥就不介绍了。
2.6 Response.body 属性
Response.body属性是 Response 对象暴露出的底层接⼝，返回⼀个 ReadableStream 对象，供⽤户操作。
它可以⽤来分块读取内容，应⽤之⼀就是显⽰下载的进度。
const response = await fetch('flower.jpg');
const reader = Reader();
while(true) {
const {done, value} = ad();
if (done) {
break;
}
console.log(`Received ${value.length} bytes`)
}
上⾯⽰例中，Reader()⽅法返回⼀个遍历器。这个遍历器的read()⽅法每次返回⼀个对象，表⽰本次读取的内容块。
这个对象的done属性是⼀个布尔值，⽤来判断有没有读完；value属性是⼀个 arrayBuffer 数组，表⽰内容块的内容，⽽value.length属性是当前块的⼤⼩。
三、fetch()的第⼆个参数：定制 HTTP 请求
fetch()的第⼀个参数是 URL，还可以接受第⼆个参数，作为配置对象，定制发出的 HTTP 请求。
fetch(url, optionObj)
上⾯命令的optionObj就是第⼆个参数。
HTTP 请求的⽅法、标头、数据体都在这个对象⾥⾯设置。下⾯是⼀些⽰例。
（1）POST 请求
const response = await fetch(url, {
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
},
body: 'foo=bar&lorem=ipsum',
});
const json = await response.json();
上⾯⽰例中，配置对象⽤到了三个属性。
method：HTTP 请求的⽅法，POST、DELETE、PUT都在这个属性设置。
headers：⼀个对象，⽤来定制 HTTP 请求的标头。
body：POST 请求的数据体。
注意，有些标头不能通过headers属性设置，⽐如Content-Length、Cookie、Host等等。它们是由浏览器⾃动⽣成，⽆法修改。
（2）提交 JSON 数据
const user =  { name:  'John', surname:  'Smith'  };
const response = await fetch('/article/fetch/post/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(user)
});
上⾯⽰例中，标头Content-Type要设成'application/json;charset=utf-8'。因为默认发送的是纯⽂本，Content-Type的默认值是'text/plain;charset=UTF-8'。（3）提交表单
const form = document.querySelector('form');
const response = await fetch('/users', {
method: 'POST',
body: new FormData(form)
})
（4）⽂件上传
如果表单⾥⾯有⽂件选择器，可以⽤前⼀个例⼦的写法，上传的⽂件包含在整个表单⾥⾯，⼀起提交。
另⼀种⽅法是⽤脚本添加⽂件，构造出⼀个表单，进⾏上传，请看下⾯的例⼦。
const input = document.querySelector('input[type="file"]');
const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');
fetch('/avatars', {
method: 'POST',
body: data
});
上传⼆进制⽂件时，不⽤修改标头的Content-Type，浏览器会⾃动设置。
（5）直接上传⼆进制数据
fetch()也可以直接上传⼆进制数据，将 Blob 或 arrayBuffer 数据放在body属性⾥⾯。
let blob = await new Promise(resolve =>

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