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

web修理工

已于 2022-09-09 15:19:28 修改

阅读量5.4k

点赞数 2

分类专栏： JavaScript 文章标签： javascript json 前端

于 2022-09-08 15:31:04 首次发布

本文链接：https://blog.csdn.net/qq_42374676/article/details/124568786

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 字符串 转 buff
        function String2ArrayBuffer(str, cb) {
            var b = new Blob([str], { type: 'text/plain;charset=utf-8' });
            var f = new FileReader();
            f.onload = function (e) {
                cb(e.target.result);
            }
            f.readAsArrayBuffer(b);
        }

        String2ArrayBuffer('你好啊', function (buf) {
            var u8 = new Uint8Array(buf);
            console.log(u8);
            // buff 转字符串
            console.log(ab2str(u8), '===')
        })

        // ArrayBuffer 转字符串
        function ab2str(u, f) {
            var b = new Blob([u]);
            var r = new FileReader();
            r.readAsText(b, 'utf-8');
            r.onload = function (e) {
                console.log(e.target.result, '===')
            }
        }

        // 其他进制 转换成十进制  
        parseInt('123', 5)
        // 将'123'看作 5 进制数，返回十进制数 38 => 1*5^2 + 2*5^1 + 3*5^0 = 38 
        // 1,2,3进位数小于 5
        console.log(parseInt('11', 16))
        // 1*16^1+1*16^0=17   1小于16
        console.log(parseInt('11', 2))
        // 1*2^1+1*2^0=3   1小于2

        // 十进制转其他进制
        console.log((38).toString(5), '===') // 38
        console.log((17).toString(11), '===')// 16
        console.log((3).toString(2), '===')  // 11

        // Unicode 是一种编码格式  对应的是字符集合
        console.log(String.fromCharCode('a'))

        let sentence = 'abcdefg'
        console.log(sentence.charCodeAt(1), 'charCodeAt') // 113;
        console.log(String.fromCharCode(113), 'fromCharCode') // q
        console.log(sentence.charAt(1), 'charAt') // q
    </script>
</body>

</html>

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

    click: () => {
         fetch(params.row.images)
        .then((response) => response.text())
        .then((response) => {
         console.log(response, "===============response");
         });                   
                  },

原文链接：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()方法，可以提供一种简单，合理的方式在网络上异步获取资源。

常用基本的json格式响应

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

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

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

POST传递参数

fetch(url', {
  method: 'POST',
   // responseType: "arraybuffer",
   // responseType: "blob",
  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,  
  // responseType: "arraybuffer",
  // responseType: "blob",
).then((response) => {  
 if (response.ok) {  
     return response.json();  
 }  
).then((json) => {  
 alert(JSON.stringify(json));  
).catch((error) => {  
 console.error(error);  
);

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类型（最初是空字节序列）。

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) {
  // ... 
});

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解决

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

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'

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

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

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

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

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

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

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

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

web修理工

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
fetch请求获取blob和arraybuffer文件流及核心API使用总结 -新

原文链接：https://blog.csdn.net/WU5229485/article/details/85219165在项目中使用fetch操作文件流，因为没有用到axios，而且fetch的使用方式和axios还有一定的区别，所以写一篇博文，具体细致的描述下fetch的基本使用。一、Fetch在项目中的基本使用Fetch API提供了一个 JavaScript 接口用于访问和操作HTTP管道的零件，如请求和响应。它还提供了一种全局fetch()方法，可以提供一种简单，合理的方式在网络上异步获取资
复制链接

扫一扫