从 ReadableStream 对象中检索数据?

IT技术 javascript node.js reactjs fetch
2021-03-18 16:41:17

如何从ReadableStream对象中获取信息

我正在使用 Fetch API,但从文档中看不到这一点。

正文作为 a 返回ReadableStream,我只想访问此流中的属性。在浏览器开发工具中的响应下,我似乎将这些信息以 JavaScript 对象的形式组织到属性中。

fetch('http://192.168.5.6:2000/api/car', obj)
    .then((res) => {
        if(res.status == 200) {
            console.log("Success :" + res.statusText);   //works just fine
        }
        else if(res.status == 400) {
            console.log(JSON.stringify(res.body.json());  //res.body is undefined.
        }

        return res.json();
    })
6个回答

为了从 a 访问数据,ReadableStream您需要调用其中一种转换方法(此处提供文档)。

举个例子:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    // The response is a Response instance.
    // You parse the data into a useable format using `.json()`
    return response.json();
  }).then(function(data) {
    // `data` is the parsed version of the JSON returned from the above endpoint.
    console.log(data);  // { "userId": 1, "id": 1, "title": "...", "body": "..." }
  });

编辑:如果您的数据返回类型不是 JSON 或者您不想要 JSON,则使用text()

举个例子:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    return response.text();
  }).then(function(data) {
    console.log(data); // this will be a string
  });

希望这有助于澄清事情。

太棒了,使用 react 和 request native,并想知道世界上可以用 ReadableStream 做什么,这成功了。++
2021-04-22 16:41:17
2021-04-27 16:41:17
只是一个提示,似乎很简单,但请确保您正在访问的后端实际上提供了有效的 JSON!绝对不是经验之谈。
2021-04-29 16:41:17
我尝试从第一个 .then() 函数中返回的 json 响应中访问 res.body。为了更清楚,我在原始问题中添加了一个示例。谢谢!
2021-05-04 16:41:17
感谢您的回复。我已经尝试过这个,但仍然遇到同样的错误,其中 res.body 未定义。但是,我可以首先使用 res.status 在 then() 函数中检索状态。似乎只有主体是 ReadableStream 对象。它似乎确实锁定了一个属性,该属性设置为 true?
2021-05-13 16:41:17

有些人可能会发现一个async有用例子:

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

json()将响应的主体从 aReadableStream转换为 json 对象。

这些await语句必须包含在一个async函数中,但是您可以await直接在 Chrome 的控制台中运行语句(从 62 版开始)。

有时对你来说真正的答案真的是 #2 哈哈,他们为什么让 .json() 异步是有道理的,但这并不是很明显
2021-05-17 16:41:17

res.json()返回一个Promise。尝试 ...

res.json().then(body => console.log(body));
我试过这个,它打印出 Promise 而不是主体。
2021-04-21 16:41:17
尝试链接.then调用:fetch(...).then(res => res.json()).then(data => console.log(data))
2021-05-19 16:41:17

参加聚会有点晚,但在ReadableStream使用 Sharepoint 框架从 Odata $batch 请求中获取有用的东西时遇到了一些问题

与 OP 有类似的问题,但在我的案例中的解决方案是使用与.json(). 在我的情况下,.text()就像一个魅力。然而,为了从文本文件中获取一些有用的 JSON,需要进行一些摆弄。

谢谢!这对我有用。我正在从我的 Laravel 服务器发送一个 Illuminate http 响应,并带有一个简单的return $data;. 我终于能够在浏览器中阅读此响应fetch(...).then(response => response.text()).then(data => console.log(data));
2021-05-18 16:41:17

请注意,您只能读取一次流,因此在某些情况下,您可能需要克隆响应以重复读取它:

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))