如何从ReadableStream对象中获取信息?

我使用的取回API,我没有看到这是清楚的从文档。

主体被返回为一个ReadableStream,我只是想访问这个流中的属性。在浏览器开发工具的Response下,我似乎以JavaScript对象的形式将这些信息组织成属性。

fetch('http://192.168.5.6:2000/api/car', obj)
    .then((res) => {
        if(!res.ok) {
            console.log("Failure:" + res.statusText);
            throw new Error('HTTP ' + res.status);
        } else {
            console.log("Success :" + res.statusText);
            return res.body // what gives?
        }
    })

当前回答

我不喜欢用锁链。第二个人就无法获得地位。如前所述,'response.json()'返回一个承诺。返回'response.json()'的then结果,动作类似于第二个then。它还有一个额外的好处,就是在响应范围内。

return fetch(url, params).then(response => {
    return response.json().then(body => {
        if (response.status === 200) {
            return body
        } else {
            throw body
        }
    })
})

其他回答

你可能问了一个错误的问题来解决你的问题,但这里有一个对你实际问题的答案。灵感可能来自Node.js流/消费者模块的源代码。

body是一个ReadableStream,它以Uint8Arrays的形式发出chunk。下面的函数将收集单个Uint8Array中的所有块:

export async function streamToArrayBuffer(stream: ReadableStream<Uint8Array>): Promise<Uint8Array> {
    let result = new Uint8Array(0);
    const reader = stream.getReader();
    while (true) { // eslint-disable-line no-constant-condition
        const { done, value } = await reader.read();
        if (done) {
            break;
        }

        const newResult = new Uint8Array(result.length + value.length);
        newResult.set(result);
        newResult.set(value, result.length);
        result = newResult;
    }
    return result;
}

然后可以使用TextDecoder将数组转换为字符串。然后你可以使用JSON.parse()解析这个字符串:

const buffer = await streamToArrayBuffer(res.body);
const text = new TextDecoder().decode(buffer);
const json = JSON.parse(text);

将来当浏览器支持它时,你也可以使用TextDecoderStream直接收集流内容作为字符串:

export async function streamToText(stream: ReadableStream<Uint8Array>): Promise<string> {
    let result = '';
    const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
    while (true) { // eslint-disable-line no-constant-condition
        const { done, value } = await reader.read();
        if (done) {
            break;
        }

        result += value;
    }
    return result;
}

注意,你只能读取一个流一次,所以在某些情况下,你可能需要克隆响应来重复读取它:

fetch('example.json')
  .then(res=>res.clone().json())
  .then( json => console.log(json))

fetch('url_that_returns_text')
  .then(res=>res.clone().text())
  .then( text => console.log(text))

有点晚了,但是在使用Sharepoint框架从Odata $batch请求生成的ReadableStream中获得一些有用的东西时遇到了一些问题。

与OP有类似的问题,但在我的情况下,解决方案是使用不同于.json()的转换方法。在我的例子中,.text()就像一个魅力。然而,为了从文本文件中获得一些有用的JSON,需要进行一些修改。

对于那些拥有ReadableStream并想要从中获取文本的人来说,一个简短的技巧是将其包装在一个新的Response(或Request)中,然后使用text方法:

let text = await new Response(yourReadableStream).text();

有些人可能会发现一个异步的例子很有用:

var response = await fetch("https://httpbin.org/ip");
var body = await response.json(); // .json() is asynchronous and therefore must be awaited

json()将响应体从ReadableStream转换为json对象。

await语句必须被包装在一个异步函数中,但是你可以直接在Chrome的控制台上运行await语句(从版本62开始)。