ReadableStream ऑब्जेक्ट से डेटा पुनर्प्राप्त करें?


135

मुझे किसी ReadableStreamवस्तु की जानकारी कैसे मिल सकती है ?

मैं Fetch API का उपयोग कर रहा हूं और मैं इसे प्रलेखन से स्पष्ट नहीं देखता हूं।

शरीर को एक के रूप में लौटाया जा रहा है ReadableStreamऔर मैं इस धारा के भीतर एक संपत्ति का उपयोग करना चाहूंगा। ब्राउज़र डे टूल्स में रिस्पॉन्स के तहत, मुझे यह जानकारी एक जावास्क्रिप्ट ऑब्जेक्ट के रूप में, गुणों में व्यवस्थित होने के लिए दिखाई देती है।

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();
    })


2
@FrancescoPezzella प्रतिक्रिया के लिए धन्यवाद। मैंने कोशिश की है response.Body.json(), लेकिन मैं इटैलिक टाइप हो रहा हूं टाइपर: अपरिभाषित इटैलिक की संपत्ति 'जसन' नहीं पढ़ सकता । क्या यह इसलिए है क्योंकि शरीर की संपत्ति भी झूठी तय की गई है? हालाँकि मैं इस बॉडी को ब्राउज़र डेवलपर टूल्स में रिस्पॉन्स टैब के तहत देख सकता हूं। एक त्रुटि संदेश है जिसे मैं पुनः प्राप्त करना चाहूंगा।
noob

तो आपका मुद्दा शुद्ध रूप से त्रुटि 400 स्थिति से संबंधित है? यदि आप हैंडलर को बदल दें तो क्या होगा console.log(res.json());? क्या आप वह डेटा देख रहे हैं जिसकी आप अपेक्षा कर रहे हैं?
एशले 'CptLemming' विल्सन

क्या आप एक धारा के रूप में प्रतिक्रिया पढ़ने की कोशिश कर रहे हैं res.status == 200?
.१३१४

क्या यह सिर्फ मैं या वह दस्तावेज सादा है? मैंने हालांकि इस जवाब पर समाधान के साथ इसे ठीक किया।
लुसियो

जवाबों:


177

डेटा से एक्सेस करने के लिए 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
  });

आशा है कि यह स्पष्ट चीजों में मदद करता है।


1
जवाब देने के लिए धन्यवाद। मैंने यह कोशिश की है और मुझे अभी भी वही त्रुटि मिल रही है, जहाँ res.body अपरिभाषित है। मैं फिर भी स्थिति को पुनः प्राप्त करने में सक्षम हूँ (फिर) res.status के साथ कार्य। ऐसा लगता है कि केवल शरीर एक ReadableStream ऑब्जेक्ट है। ऐसा लगता है कि किसी संपत्ति पर ताला लगा है, जो सच है?
दोपहर

आप कहां पहुंचना चाह रहे हैं res.body(यह मेरे उदाहरण का हिस्सा नहीं है)? क्या आप यह स्पष्ट करने के लिए अपने मूल प्रश्न में कुछ नमूना कोड साझा कर सकते हैं कि आपकी समस्या कहाँ हो सकती है।
एशले 'CptLemming' विल्सन

1
मैंने पहले .then () फ़ंक्शन में दी गई json प्रतिक्रिया से res.body तक पहुँचने का प्रयास किया। मैंने अधिक स्पष्टता के लिए अपने मूल प्रश्न का एक नमूना जोड़ा है। धन्यवाद!
नोब

1
बहुत बढ़िया, प्रतिक्रिया और मूल अनुरोध का उपयोग करते हुए, और यह सोचकर कि दुनिया में एक ReadableStream के साथ क्या करना है, और इसने यह चाल चली। ++
edencorbin

बस एक हेडअप, एक नो-ब्रेनर की तरह लगता है, लेकिन सुनिश्चित करें कि आप जो बैकएंड मार रहे हैं, वह वास्तव में वैध JSON प्रदान कर रहा है! निश्चित रूप से अनुभव से नहीं बोल रहा है।
abelito

45

कुछ लोगों को asyncउपयोगी एक उदाहरण मिल सकता है:

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

json()प्रतिक्रिया की बॉडी को ए ReadableStreamसे एक जोंस ऑब्जेक्ट में परिवर्तित करता है ।

awaitस्टेटमेंट एक में लपेटा जाना चाहिए asyncलेकिन आप चला सकते हैं, समारोह await(संस्करण 62) के रूप में क्रोम के कंसोल में सीधे बयान।


1
कभी-कभी आपके लिए वास्तव में उत्तर # 2 haha ​​होता है, यह समझ में आता है कि वे क्यों बनाते हैं .json () अतुल्यकालिक लेकिन यह तुरंत स्पष्ट नहीं था
संचित बत्रा

29

res.json()प्रतिज्ञा देता है। प्रयत्न ...

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

3
मैंने यह कोशिश की, और यह शरीर के बजाय वादा छपी।
रेक्ट्रिक्स

.thenकॉल को चेन करने की कोशिश करें :fetch(...).then(res => res.json()).then(data => console.log(data))
Gscar Gómez Alcañiz

12

पार्टी के लिए थोड़ा देर से लेकिन कुछ समस्याओं के साथ कुछ उपयोगी हो रही थी एक से बाहर ReadableStream ओडटा $ बैच अनुरोध से शेयरपॉइंट फ्रेमवर्क का उपयोग करके उत्पादित से ।

ओपी के समान मुद्दे थे, लेकिन मेरे मामले में समाधान की तुलना में एक अलग रूपांतरण पद्धति का उपयोग करना था .json()। मेरे मामले में .text()एक आकर्षण की तरह काम किया। हालांकि टेक्स्टफाइल से कुछ उपयोगी JSON प्राप्त करने के लिए कुछ फ़िडलिंग आवश्यक थी।


2
धन्यवाद! इसने मेरे लिए काम किया। मैं अपने लारवेल सर्वर से एक सरल के साथ एक इलुमिनेट http प्रतिक्रिया भेज रहा हूं return $data;। मैं आखिरकार ब्राउज़र में इस प्रतिक्रिया को पढ़ने में सक्षम थाfetch(...).then(response => response.text()).then(data => console.log(data));
कैमरन हडसन

10

यदि आप केवल पाठ के रूप में प्रतिक्रिया चाहते हैं और इसे 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);
  });

2

मैं जंजीरों को नापसंद करता हूं। दूसरे की स्थिति तक पहुंच नहीं है। जैसा कि 'response.json ()' से पहले कहा गया है कि एक वादा वापस लौटा। तत्पश्चात एक दूसरे के समान कृत्यों में 'response.json ()' के तत्कालीन परिणाम को लौटाना। इसमें प्रतिक्रिया के दायरे में जोड़ा गया बोनस है।

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

चेनिंग thenआपको अंतिम हल किए गए मान ( body) को पुनः प्राप्त करने में मदद करता है । उन्हें घोंसला बनाना आपको bodyबिना कॉलबैक या किसी तरह के तंत्र के मूल्य प्राप्त करने से रोकता है । इस कल्पना कीजिए: let body = await fetch(...).then(res => res.json()).then(data => data)। यह नेस्टेड तरीके से काम नहीं करेगा। आप के लिए जाँच करने के लिए response.statusहमेशा throwपहले के अंदर एक अपवाद कर सकते हैं then, और catchपूरे वादा श्रृंखला में एक जोड़ सकते हैं ।
सकर गोमेज़ अलकनीज़

0

ध्यान दें कि आप केवल एक बार एक स्ट्रीम पढ़ सकते हैं, इसलिए कुछ मामलों में, आपको इसे बार-बार पढ़ने के लिए प्रतिक्रिया को क्लोन करने की आवश्यकता हो सकती है:

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))
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.