javascript基础从小白到高手系列二千四百四十六：常见Fetch 请求模式

与XMLHttpRequest 一样，fetch()既可以发送数据也可以接收数据。使用init 对象参数，可
以配置fetch()在请求体中发送各种序列化的数据。

1. 发送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