Estoy tratando de buscar y consolar mis datos transmitidos desde FastApi a través de StreamedResponse usando fetch pero no puedo hacerlo funcionar. Chrome dice Cannot read properties of null (reading 'getReader')
porque response.body
es nulo. ¿Qué estoy haciendo mal?
Servidor
async def foo(): for i in range(5): time.sleep(1) yield b'foobar' @app.get('/bar') async def bar(): return StreamingResponse(foo(), media_type='text/plain')
cliente
async function buttonclick() { let url = 'http://localhost:8000/bar'; let options = { mode: 'no-cors', method: 'GET' } fetch(url, options) .then(processChunkedResponse) .then(onChunkedResponseComplete) .catch(onChunkedResponseError); } function onChunkedResponseComplete(result) { console.log('all done!', result) } function onChunkedResponseError(err) { console.error(err) } function processChunkedResponse(response) { var text = ''; var reader = response.body.getReader() var decoder = new TextDecoder(); return readChunk(); function readChunk() { return reader.read().then(appendChunks); } function appendChunks(result) { var chunk = decoder.decode(result.value || new Uint8Array, {stream: !result.done}); console.log('got chunk of', chunk.length, 'bytes') text += chunk; console.log('text so far is', text.length, 'bytes\n'); if (result.done) { console.log('returning') return text; } else { console.log('recursing') return readChunk(); } } }
Un Request.mode
no-cors
devuelve una respuesta opaca y "JavaScript no puede acceder a ninguna propiedad de la respuesta resultante". Su servidor puede proporcionar el encabezado Access-Control-Allow-Origin
y el cliente debe usar un cors
fetch estándar.
Además, es posible que deba realizar este cambio para garantizar que se devuelva una Promesa:
if (result.done) { //return text return Promise.resolve(text) }