在项目中使用fetch操作文件流，因为没有用到axios，而且fetch的使用方式和axios还有一定的区别，所以写一篇博文，具体细致的描述下fetch的基本使用。
一、Fetch在项目中的基本使用
Fetch API提供了一个 JavaScript 接口用于访问和操作HTTP管道的零件，如请求和响应。它还提供了一种全局fetch()方法，可以提供一种简单，合理的方式在网络上异步获取资源。
1. 常用基本的json格式响应
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});2. 常用参数配置写法
GET传递参数
fetch(url?key1=val1&key2=val2&...).then((response) => response.json()).then((json) => {
//处理返回值}).catch((error) => {
//异常处理})POST传递参数
fetch(url', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'secondValue',
})
})复杂表单数据的传递，比如图片、文件等
let formData = new FormData();
formData.append("key",表单内容);
fetch(url , {
method: 'POST',
headers: {},
body: formData,
).then((response) => {
if (response.ok) {
return response.json();
}
).then((json) => {
alert(JSON.stringify(json));
).catch((error) => {
console.error(error);
);3. blob和arraybuffer文件流响应获取
获取blob文件流
// 点击音乐列表请求音乐数据
requestMusicData(item,index){
//请求并且传递音乐名称
fetch('/music/file?name='+item.innerText,{
method: 'get',
responseType: 'blob'
}).then(res => {
return res.blob();
}).then(blob => {
let bl = new Blob([blob], {type: "audio/m4a"});
let fileName = Date.parse(new Date())+".m4a";
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
})
}获取arraybuffer文件流
requestMusicData(item,index){
//请求并且传递音乐名称
fetch('/music/file?name='+item.innerText,{
method: 'get',
responseType: 'arraybuffer'
}).then(res => {
return res.arrayBuffer();
}).then(arraybuffer => {
//...
})
}二、fetch高级使用
Fetch API的Body mixin表示响应/请求的主体，允许你声明一下它的内容类型以及它应该如何处理。
Body是通过Request和Response来实现的。这为这些对象提供了一个关联的主体（一个流），一个使用的标志（最初未设置）和一个MIME类型（最初是空字节序列）。
1. Fetch API：Body接口
接口属性：
Body.body（只读）
一个简单的getter用来发现正文内容的ReadableStream。
Body.bodyUsed（只读）
一个Boolean表明是否已经阅读主体的内容。
控制台打印如下：
接口方法
基本使用案例分析：
res.arrayBuffer()
arrayBuffer() 方法会返回一个promise，可以解决一个ArrayBuffer
res.blob()
blob() 方法将返回一个promise，使用一个Blob解决
res.formData()
formData() 方法返回一个Promise，它使用一个FormData对象来解决
res.json()
json() 方法返回解析正文文本为JSON的结果。这可以是任何可以由JSON表示的东西：对象、数组、字符串、数字等等
res.text()
text() 方法返回一个promise，使用一个USVString解决
2. Body接口执行者
1. Body执行者 Request
在Body接口中，该Request()构造函数用来创建一个新的Request对象
简单案例体验：
var myImage = document.querySelector('img');
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' };
var myRequest = new Request('flowers.jpg',myInit); // 参数和fetch(attr)的attr参数保持一致
fetch(myRequest).then(function(response) {
...
});2. Request常用属性（fetch(options)中的options属性）
url： url 只读属性的值为一个 USVString，它表示请求的 URL
method: method 只读属性的属性值为 ByteString，表示请求的方法（ 默认 GET ）
headers: 一个Headers对象，示例如下：
mode: Request 接口的 mode 只读属性包含请求的模式（例如，cors，no-cors，same-origin，或 navigate）这是用来确定跨域请求是否导致有效的响应，并且其响应的哪些属性是可读的，默认允许跨域cros。
cache: cache只读属性包含请求的缓存模式。它控制请求将如何与浏览器的HTTP缓存进行交互。
cache属性值参考文档：https://www.w3cschool.cn/fetch_api/fetch_api-hokx2khz.html
credentials: credentials只读属性指示用户代理是否应该在来源请求中发送来自其他域的cookie。这与XHR的 withCredentials标志类似，但有三个可用的值（而不是两个）：
（1）omit：从不发送cookie。
（2）same-origin：如果URL与调用脚本位于相同的源，则发送用户凭证（cookie，基本http认证等）。
（3）include：始终发送用户凭据（cookie，基本http认证等），甚至用于跨源调用。
referrer: referrer 只读属性由用户代理设置为 Request 的引用者，例如 client，no-referrer，或 URL。注意：如果 referrer 只读属性的值是 no-referrer，则它将返回一个空字符串。
其上常用属性的浏览器兼容性请参考：https://www.w3cschool.cn/fetch_api/fetch_api-6ezi2lim.html
3. Request方法罗列
arrayBuffer()
概述：arrayBuffer() 方法采用 Response 流并将其读入完成。它返回一个 ArrayBuffer 解决的 promise
代码案例：blob()
概述：blob() 方法读取一个 Response 流，并且将它读取完成。它返回一个用 Blob 解决的 promise
代码案例：formData()
概述： formData() 方法采取 Response 流并读取完成。它返回一个以 FormData 对象解决的 promise
代码案例：clone()
概述：Request 接口的 clone() 方法用于创建当前 Request 对象的副本。 如果响应 Body 已被使用，则 clone() 方法将抛出一个 TypeError。实际上，clone() 存在的主要原因是允许 Body 对象的多次使用（当它们只是一次性使用时）
代码案例：text()
三. Fetch API 官方文档参考地址
https://www.w3cschool.cn/fetch_api/fetch_api-w7mt2jzc.html
