promise 链的问题

Question

import { Observable } from 'rxjs/internal/Observable';

export function createHttpObservable(url: string) {
    console.log('Url is', url);
    return Observable.create(observer => {
        fetch(url)
        .then(response => {
            console.log(response);
            console.log(response.json());
            return response.json();
        })
        .then(body => {
            observer.next(body);
            observer.complete();
        })
        .catch(err => observer.error(err));
    });
}

I am not able to figure out why in above code the execution does not move to second then block. The browser console logs is as follows.

However if i remove the line console.log(response.json()); , the code works fine. May be it is a very basic question, but somehow i am not able to figure out. If you know, please help me. Thanks in advance.

Answer 1

The Response#body is aReadableStream . A stream can be consumed only once and then It's empty. Since the Body#json() method reads the stream to completion , the second time you try to use the same body, you are tapping into an empty stream. That's why the Response API implementation locks the stream and doesn't allow to call the method twice.

You can try It yourself:

const a = new ReadableStream();
const b = new Response(a);

b.json(); // returns a Promise
b.json(); // TypeError: Failed to execute 'json' on 'Response': body stream is locked

Answer 2

Calling response.json() locks the resouce so the second call will fail.

You should avoid calling it twice but if you really want to see the result there I would advice you using this code:

   required here
       \/
.then(async response => {
    console.log(response);
    console.log(await response.clone().json()); // read json result from cloned response
    return response.json();
})

or simply log it in the second then :

.then(async response => {
   console.log(response);
   return response.json();
 })
.then(body => { 
   console.log(body); // it doesn't require any workarounds
   observer.next(body);
   observer.complete();
})