javascript基础从入门到专家系列第736期：常见的Fetch请求模式

发送JSON 数据
可以像下面这样发送简单JSON 字符串：
let payload = JSON.stringify({
foo: ‘bar’
});
let jsonHeaders = new Headers({
‘Content-Type’: ‘application/json’
});
fetch(‘/send-me-json’, {
method: ‘POST’, // 发送请求体时必须使用一种HTTP 方法
body: payload,
headers: jsonHeaders
});
在请求体中发送参数
因为请求体支持任意字符串值，所以可以通过它发送请求参数：
let payload = ‘foo=bar&baz=qux’;
let paramHeaders = new Headers({
‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’
});
fetch(‘/send-me-params’, {
method: ‘POST’, // 发送请求体时必须使用一种HTTP 方法
body: payload,
headers: paramHeaders
});
发送文件
因为请求体支持FormData 实现，所以fetch()也可以序列化并发送文件字段中的文件：
let imageFormData = new FormData();
let imageInput = document.querySelector(“input[type=‘file’]”);
imageFormData.append(‘image’, imageInput.files[0]);
fetch(‘/img-upload’, {
method: ‘POST’,
body: imageFormData
});
这个fetch()实现可以支持多个文件：
let imageFormData = new FormData();
let imageInput = document.querySelector(“input[type=‘file’][multiple]”);
for (let i = 0; i < imageInput.files.length; ++i) {
imageFormData.append(‘image’, imageInput.files[i]);
}
fetch(‘/img-upload’, {
method: ‘POST’,
body: imageFormData
});
加载Blob 文件
Fetch API 也能提供Blob 类型的响应，而Blob 又可以兼容多种浏览器API。一种常见的做法是明确将
图片文件加载到内存，然后将其添加到HTML图片元素。为此，可以使用响应对象上暴露的blob()方法。
这个方法返回一个期约，解决为一个Blob 的实例。然后，可以将这个实例传给URL.createObjectUrl()
以生成可以添加给图片元素src 属性的值：
const imageElement = document.querySelector(‘img’);
fetch(‘my-image.png’)
.then((response) => response.blob())
.then((blob) => {
imageElement.src = URL.createObjectURL(blob);
});
发送跨源请求
从不同的源请求资源，响应要包含CORS 头部才能保证浏览器收到响应。没有这些头部，跨源请求
会失败并抛出错误。
fetch(‘//cross-origin.com’);
// TypeError: Failed to fetch
// No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
如果代码不需要访问响应，也可以发送no-cors 请求。此时响应的type 属性值为opaque，因此无法读取响应内容。这种方式适合发送探测请求或者将响应缓存起来供以后使用。
fetch(‘//cross-origin.com’, { method: ‘no-cors’ })
.then((response) => console.log(response.type));
// opaque