Javascript 使用带有响应的异步ReadableStream从服务工作者的获取事件返回HTML

此问题类似于，但考虑了

ReadableStream

中的异步性质

这是我现在的测试代码：

const stream=新的可读流({
启动（c）{
设i=1
常数t=设定间隔（测试，5e2）
功能测试（）{
c、 排队（“黄色！”）
如果（i++==5）{
净间隔（t）
c、 关闭（）
}
}
}
})
event.respondWith（新响应（流，{headers:{“content type”：“text/html”}}））

上面的代码不是由浏览器呈现的，我不知道为什么。看来应该行得通。但它似乎没有读取任何

排队

项

请注意，在我的另一个问题中，答案至少给出了第一个回答：

constcreatestream=（）=>newreadablestream({
启动（控制器）{
controller.enqueue（“黄色！”）
controller.close（）
}
})
const secondStream=createStream（）.getReader（）；
secondStream.read（）
.那么(({
价值
}) => {
返回新的响应（值{
标题：{
“内容类型”：“文本/html”
}
});
})
.then（response=>response.text（））
。然后（文本=>{
console.log（文本）；
});

这似乎是有道理的，因为它一次读取所有内容，而不考虑流是否完成

我使用的资源：

---

将

Uint8Array

放入

controller.enqueue

方法时，看起来像

stream

likes

在你的例子的帮助下，你的工作

const数据=[
{name:“Yellow”，value:'Yellow'}，
{name:“Green”，value:'Green'}，
{name:“Blue”，value:'Blue'}，
{name:“Red”，value:'Red'}，
{name:“Orange”，value:'Orange'}，
]
const encoder=新的textcoder（）；
const stream=新的ReadableStream({
启动（控制器）{
设i=1
常量句柄=设置间隔（测试，5e2）
功能测试（）{
常量{name，value}=data[i-1]；
controller.enqueue（encoder.encode（`${name}！`））
如果（i++==5）{
清除间隔（句柄）
controller.close（）
}
}
}
})
新响应（流，{头：{“内容类型”：“text/html”}）
.text（）。然后（text=>{
document.body.innerHTML=文本；
})

只是出于好奇。您是如何发现需要对字符串进行编码的？我复制粘贴了mdn中的示例，该示例从

fetch

result和

console.log创建
ReadableStream