このストリーミング API エンドポイントがあります。
https://step3-ndjson-stream-api-demo.glitch.me/
can.js NDJSON ストリームでレンダリングしようとしましたが、例に従うと、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 プロセスを終了します。
promise の失敗: TypeError: response.getReader は関数ではありません
それらをクリアする方法を知っている人はいますか？