我有这个流API端点:
https://step3-ndjson-stream-api-demo.glitch.me/
我尝试使用can.js NDJSON stream进行渲染,并在示例之后将一些成功输出输出到console.log,但仅输出第一个对象。
这是我的app.js(已截断):
const AppViewModel = DefineMap.extend("AppViewModel", {
// misc. properties, then
get streamFunct(){
return fetch(
'https://step3-ndjson-stream-api-demo.glitch.me/'
).then(function(response){
return ndjsonStream( response.body );
}).then( ( streamData ) => {
const reader = streamData.getReader();
let read;
reader.read().then( read = ( result ) => {
if ( result.done ) {
return;
}
console.log( result.value );
streamData.getReader().read().then( read );
} );
} );
}
});
这是我的index.stache的摘录:
<p>Stream Data: <strong>{{streamFunct}}</strong></p>
我的控制台开发人员视图(请注意成功的第一个调用):
我认为我必须处理index.stache中的promise对象,但不确定...谢谢您。
更新
最后我可以获取流数据:
get streamFunct(){
return fetch(
'https://step3-ndjson-stream-api-demo.glitch.me/'
).then(function(response){
return ndjsonStream( response.body );
}).then( ( streamData ) => {
//retain access to the reader so that you can cancel it
const reader = streamData.getReader();
const listResult = document.querySelector('.displayResult ul')
let read;
reader.read().then( read = ( result ) => {
if ( result.done ) {
console.log('Failed to find match');
return;
}
const chunk = result.value;
let listItem = document.createElement('li');
listItem.textContent = chunk.user;
listResult.appendChild(listItem);
return reader.read().then(read);
} ).catch ((error) => {
console.log(error);
});
} );
}
并修改我的index.stache:
<p>Stream Data:</p>
<div class="displayResult">
<ul>
</ul>
</div>
但我仍然收到错误/警告:
UnhandledPromiseRejectionWarning:错误[ERR_HTTP_HEADERS_SENT]: 将标头发送到客户端后无法设置
[DEP0018] DeprecationWarning:未处理的Promise拒绝是 不推荐使用。将来,未处理的承诺拒绝 将使用非零退出代码终止Node.js进程。
失败的承诺:TypeError:response.getReader不是函数
有人知道如何清除它们吗?