WritableStream()写入流，将数字或字符流，写入你需要的地方
WritableStream有两个对象参数：
第一个必选，用于配置一些写入流时的钩子；
第二个可选，用于配置一些chunk入队和队列控制的策略；
第二个参数的策略（利用ByteLengthQueuingStrategy【按字节计量】和CountQueuingStrategy【按元素数量计量】接口去定义策略）两种
在第一个参数必选中，所有的对象字段都是可选的，可以单选，也可以全部，如下：
start(controller)：在WritableStream对象完成构造后立即调用controller method执行一次
write(chunk,controller)：每当一个新的chunk准备写入接收器的时候，将调用方法
close(controller)：当结束写入流时候调用该方法
abort(reason)：当写入流被中断或者写入流进入错误状态的时候，调用该方法
如下面的例子：
//写入流要插入的页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=utf-8"/>
<title>javascript写入流测试</title>
</head>
<body>
<div id="stream">
<ul id="listStream"></ul>
</div>
</body>
<script type="text/javascript" src="test.js"></script>
</html>
//这里是上面html的javascript代码
//插入数字的异步函数
async function* ints(){
for(let i=0;i<5;i++)
{
const textEncoder=new TextEncoder();
const encodedText=textEncoder.encode(i);
for(let x of encodedText)
{
yield await new Promise((resolve,reject)=>setTimeout(resolve,200,x));
}
}
}
//插入字符串的异步函数
async function* strs(str)
{
for(let i=0,len=str.length;i<len;i++)
{
const textEncoder=new TextEncoder();
const encodedText=textEncoder.encode(str[i]);
for(let x of encodedText)
{
yield await new Promise((res,rej)=>setTimeout(res,100,x));
}
}
}
//解码二进制字符流
const decoder=new TextDecoder();
//这个是第二参数的可选策略，我们选按元素计量
const queuingStrategy=new CountQueuingStrategy({highWaterMark:1});
let result="";
//获取到我们在html页面中的容器元素
let list=document.getElementById('listStream');
//写入二进制流
const writableStream=new WritableStream(
{
//写入方法
write(chunk)
{
return new Promise((resolve,reject)=>{
//设置一个定型数组，在内存中分配一个字节
const buffer=new ArrayBuffer(1);
//设置一个无符号1个字节缓冲
const view=new Uint8Array(buffer);
//为1个字符赋值
view[0]=chunk;
//解码二进制文字或数字
const decoded=decoder.decode(view,{stream:true});
//创建元素
const listItem=document.createElement('li');
listItem.textContent=`Chunk decoded:${decoded}`;
list.appendChild(listItem);
//将所有解码的字符或数字串连起来
result+=decoded;
//完成期约
resolve();
});
},
//所有的字符流或数字流完成后关闭流
close()
{
const listItem=document.createElement('li');
listItem.textContent=`[message received]${result}`;
list.appendChild(listItem);
},
//发生错误时
abort(err)
{
console.error("sink error:",err);
}
},
//写入流的第二个参数
queuingStrategy,
);
//查看写入流锁的状态
console.log(writableStream.locked);
//getWriter()获得写入流的锁，锁定写入
const writableStreamDefaultWrite=writableStream.getWriter();
console.log(writableStream.locked);
//自闭异步函数执行写入操作，这里用的是字符串strs()函数，你可以用数字函数ints()
(async function(){
for await (let chunk of strs('javascript ok'))
{
await writableStreamDefaultWrite.ready;
writableStreamDefaultWrite.write(chunk);
}
writableStreamDefaultWrite.close();
})();
//最后输出是这样
Chunk decoded:j
Chunk decoded:a
Chunk decoded:v
Chunk decoded:a
Chunk decoded:s
Chunk decoded:c
Chunk decoded:r
Chunk decoded:i
Chunk decoded:p
Chunk decoded:t
Chunk decoded:
Chunk decoded:o
Chunk decoded:k
[message received]javascript ok
原文地址：https://blog.csdn.net/cdcdhj/article/details/140310436
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！