ดึงข้อมูลจากอ็อบเจ็กต์ ReadableStream?

ฉันจะรับข้อมูลจากReadableStreamวัตถุได้อย่างไร?

ฉันใช้ Fetch API และไม่เห็นว่าสิ่งนี้ชัดเจนจากเอกสารประกอบ

กำลังส่งคืนร่างเป็นReadableStreamและฉันก็แค่ต้องการเข้าถึงคุณสมบัติภายในสตรีมนี้ ภายใต้การตอบสนองในเครื่องมือ dev ของเบราว์เซอร์ฉันดูเหมือนว่าจะมีข้อมูลนี้จัดเป็นคุณสมบัติในรูปแบบของวัตถุ 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();
    })

ในการเข้าถึงข้อมูล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
  });

หวังว่านี่จะช่วยให้ทุกอย่างกระจ่างขึ้น

บางคนอาจพบว่าasyncตัวอย่างมีประโยชน์:

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

json()แปลงร่างกายของการตอบสนองจาก a ReadableStreamเป็นวัตถุ json

awaitงบต้องถูกห่อในasyncฟังก์ชั่น แต่คุณสามารถเรียกใช้awaitงบโดยตรงในคอนโซลของ Chrome (เหมือนรุ่น 62)

res.json()คืนคำสัญญา ลอง ...

res.json().then(body => console.log(body));

ไปงานปาร์ตี้ช้าไปหน่อย แต่มีปัญหาในการรับสิ่งที่เป็นประโยชน์จากReadableStreamคำขอแบทช์ $ Odata โดยใช้ Sharepoint Framework

มีปัญหาคล้ายกันกับ OP แต่วิธีแก้ปัญหาในกรณีของฉันคือใช้วิธีการแปลงที่แตกต่างจาก.json(). ในกรณีของฉัน.text()ทำงานเหมือนมีเสน่ห์ อย่างไรก็ตามการเล่นซอบางอย่างจำเป็นต้องได้รับ JSON ที่เป็นประโยชน์จากไฟล์ข้อความ

หากคุณต้องการเพียงแค่การตอบกลับเป็นข้อความและไม่ต้องการแปลงเป็น JSON ให้ใช้https://developer.mozilla.org/en-US/docs/Web/API/Body/textจากนั้นthenจึงจะได้รับจริง ผลลัพธ์ของคำสัญญา:

fetch('city-market.md')
  .then(function(response) {
    response.text().then((s) => console.log(s));
  });

หรือ

fetch('city-market.md')
  .then(function(response) {
    return response.text();
  })
  .then(function(myText) {
    console.log(myText);
  });

ฉันไม่ชอบการล่ามโซ่ อย่างที่สองไม่มีสิทธิ์เข้าถึงสถานะ ตามที่ระบุไว้ก่อนที่ 'response.json ()' จะส่งคืนคำสัญญา ส่งคืนผลลัพธ์ของ 'response.json ()' ในการกระทำที่คล้ายกับวินาทีนั้น มีโบนัสเพิ่มเติมจากการอยู่ในขอบเขตของการตอบสนอง

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

โปรดทราบว่าคุณสามารถอ่านสตรีมได้เพียงครั้งเดียวดังนั้นในบางกรณีคุณอาจต้องโคลนคำตอบเพื่ออ่านซ้ำ:

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