fetch请求获取blob和arraybuffer文件流及核心API使用总结 -新

    
    
    
    



    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

    
                       this.axios({
                         method: "get",
                         url: params.row.images,
                         // responseType: "arraybuffer",
                         // responseType: "blob",
      }).then((res) => {
                         console.log(res.data, "===");
                          var a = document.createElement("a");
                         // a.href = window.URL.createObjectURL(
                         //   new Blob([res.data])
                         // );
                         // a.download = "";
                         // a.click();
                        a.href = window.URL.createObjectURL(
                           new Blob([res.data])
                         );
                         a.download =
                           params.row.images.replace(
                             /(.*\/)*([^.]+).*/gi,
                             "$2"
                           ) + ".txt";
                         a.click();
                       });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    click: () => {
         fetch(params.row.images)
        .then((response) => response.text())
        .then((response) => {
         console.log(response, "===============response");
         });                   
                  },
1
2
3
4
5
6
7

原文链接：https://blog.csdn.net/WU5229485/article/details/85219165
应用fetch:https://blog.csdn.net/wanshaobo888/article/details/90788078

在项目中使用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");
});

1
2
3
4
5
6
7
8

2. 常用参数配置写法
   GET传递参数

fetch(url?key1=val1&key2=val2&...).then((response) => response.json()).then((json) => {
   //处理返回值
}).catch((error) => {
   //异常处理
})

1
2
3
4
5
6

POST传递参数

fetch(url', {
  method: 'POST',
   // responseType: "arraybuffer",
   // responseType: "blob",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'secondValue',
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

复杂表单数据的传递，比如图片、文件等

let formData = new FormData();  
formData.append("key",表单内容);  

  
fetch(url , {  
 method: 'POST',  
 headers: {},  
 body: formData,  
  // responseType: "arraybuffer",
  // responseType: "blob",
).then((response) => {  
 if (response.ok) {  
     return response.json();  
 }  
).then((json) => {  
 alert(JSON.stringify(json));  
).catch((error) => {  
 console.error(error);  
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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);
    })
}   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

获取arraybuffer文件流

requestMusicData(item,index){
    //请求并且传递音乐名称
    fetch('/music/file?name='+item.innerText,{
        method: 'get',
        responseType: 'arraybuffer'
    }).then(res => {     
        return res.arrayBuffer();
    }).then(arraybuffer => {
		//...
    })
}   

1
2
3
4
5
6
7
8
9
10
11
12

二、fetch高级使用
Fetch API的Body mixin表示响应/请求的主体，允许你声明一下它的内容类型以及它应该如何处理。
Body是通过Request和Response来实现的。这为这些对象提供了一个关联的主体（一个流），一个使用的标志（最初未设置）和一个MIME类型（最初是空字节序列）。

1. Fetch API：Body接口
   接口属性：
   Body.body（只读）
   一个简单的getter用来发现正文内容的ReadableStream。
   Body.bodyUsed（只读）
   一个Boolean表明是否已经阅读主体的内容。
   控制台打印如下：

接口方法
基本使用案例分析：

fetch(url)
.then(function(response) {
  return response.blob(); // 可以根据使用场景更换为 response.arrayBuffer()、response.text()、response.formData()、response.json()、response.text()
})
.then(function(youType) {
  // ... 
});

1
2
3
4
5
6
7
8

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接口执行者
3. 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) {
  ... 
});

1
2
3
4
5
6
7
8
9
10
11
12

2. Request常用属性（fetch(options)中的options属性）
   url： url 只读属性的值为一个 USVString，它表示请求的 URL
   method: method 只读属性的属性值为 ByteString，表示请求的方法（ 默认 GET ）
   headers: 一个Headers对象，示例如下：

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);
myContentType = myRequest.headers.get('Content-Type'); // returns 'image/jpeg'

1
2
3
4
5
6
7

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
代码案例：

	response.arrayBuffer().then(function(buffer) {
	  // do something with buffer
	});

1
2
3
4

blob()
概述：blob() 方法读取一个 Response 流，并且将它读取完成。它返回一个用 Blob 解决的 promise
代码案例：

	response.blob().then(function(myBlob) {
	  // do something with myBlob
	});

1
2
3
4

formData()
概述： formData() 方法采取 Response 流并读取完成。它返回一个以 FormData 对象解决的 promise
代码案例：

	response.formData().then(function(formdata) {
	  // do something with your formdata
	});

1
2
3
4

clone()
概述：Request 接口的 clone() 方法用于创建当前 Request 对象的副本。 如果响应 Body 已被使用，则 clone() 方法将抛出一个 TypeError。实际上，clone() 存在的主要原因是允许 Body 对象的多次使用（当它们只是一次性使用时）
代码案例：

	var myRequest = new Request('flowers.jpg');
	var newRequest = myRequest.clone(); // a copy of the request is now stored in newRequest

1
2
3

text()
4. Body执行者 Response
Fetch API 的 Response 接口用于表示对请求的响应。
您可以使用 Response.Response() 构造函数创建一个新的 Response 对象，但您更可能遇到由于另一个 API 操作（例如一个 service worker：Fetchevent.respondWith或简单的 GlobalFetch.fetch() 操作）而返回的 Response 对象

响应相关的属性参数和方法，前面也有部分罗列，比较简单，所以就不做搬运工了，附上目录和官方文档的地址：
response官方文档详细地址：https://www.w3cschool.cn/fetch_api/fetch_api-phz72lrr.html

5. Fetch API Headers接口
   Fetch API 的 Headers 接口允许对 HTTP 请求和响应头执行各种操作。这些操作包括检索、设置、添加和删除。一个 Headers 对象有一个关联的标题列表，它最初是空的，由零个或多个名称和值对组成。您可以使用像 append() 这样的方法添加到此处（请参阅示例）。在此 Headers 接口的所有方法中，标头名称均由不区分大小写的字节序列进行匹配。
   出于安全原因，某些标头只能由用户代理控制。这些标题包括禁止的标头名称和禁止的响应标头名称。

标头对象还有一个关联的保护，这需要 immutable，request，request-no-cors，response，或 none 的值。这会影响 set()，delete() 和 append() 方法是否会产生变异的头。

您可以通过 Request.headers 和 Response.headers 属性检索 Headers 对象，并使用 Headers.Headers() 构造函数创建一个新 Headers 对象。

一个 Headers 对象的实现可以直接用在一个 for…of 结构中，而不是 entries()：for (var p of myHeaders)，相当于 for (var p of myHeaders.entries())。
headers接口 官方文档详细地址：https://www.w3cschool.cn/fetch_api/fetch_api-ufns2m83.html
三. Fetch API 官方文档参考地址
https://www.w3cschool.cn/fetch_api/fetch_api-w7mt2jzc.html