Problem with sequential promises

Question

Problem with sequential promises

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 encountering an issue with the above code where the execution does not progress to the second then block. The browser console logs are shown below.

https://i.sstatic.net/FHIZv.png

Interestingly, if I eliminate the line console.log(response.json());, the code functions correctly. This appears to be a basic question, but I am unable to identify the cause. Any assistance would be greatly appreciated. Thank you in advance.

https://i.sstatic.net/ag5xR.png

angular typescript promise rxjs

Answer 1

Answer №1

The Response#body is actually a unique type of stream known as a ReadableStream. Once this stream is consumed, it becomes empty and cannot be used again. When the Body#json() method completely reads the stream, any subsequent attempt to access the same body results in tapping into an already empty stream. This behavior is intentional in the Response API implementation to avoid calling the method twice.

You can experiment with this 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

The Response#body is actually a unique type of stream known as a ReadableStream. Once this stream is consumed, it becomes empty and cannot be used again. When the Body#json() method completely reads the stream, any subsequent attempt to access the same body results in tapping into an already empty stream. This behavior is intentional in the Response API implementation to avoid calling the method twice.

You can experiment with this 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 3

Answer №2

When you use response.json(), the resource becomes locked, causing the second call to fail.

It's best to only make the call once, but if you really need to see the result, here is a code snippet that may help:

   Add this part
       \/
.then(async response => {
    console.log(response);
    console.log(await response.clone().json()); // retrieve json result from cloned response
    return response.json();
})

Alternatively, you can simply log it in the second then:

.then(async response => {
   console.log(response);
   return response.json();
 })
.then(body => { 
   console.log(body); // no workaround needed
   observer.next(body);
   observer.complete();
})

Answer 4

When you use response.json(), the resource becomes locked, causing the second call to fail.

It's best to only make the call once, but if you really need to see the result, here is a code snippet that may help:

   Add this part
       \/
.then(async response => {
    console.log(response);
    console.log(await response.clone().json()); // retrieve json result from cloned response
    return response.json();
})

Alternatively, you can simply log it in the second then:

.then(async response => {
   console.log(response);
   return response.json();
 })
.then(body => { 
   console.log(body); // no workaround needed
   observer.next(body);
   observer.complete();
})

Problem with sequential promises

Answer №1

Answer №2

Similar questions

Changes are reflected in the service variable, but they are not updating in the component

Updating a list item in AngularFire2 triggers a change in the overall list

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

Chunk loading in IE 11 has encountered an error

Utilizing Sequelize with Typescript for referential integrity constraints

The term 'shuterstock_init' is meant to be a type, however, it is mistakenly being treated as a value in this context

Angular ngModel failing to accurately reflect changes in input value

Unable to retrieve the key value from a child object in Angular 2 when working with JSON Data

Obtaining data attributes in Angular 8

The error message "The file 'environment.ts' is not located within the specified 'rootDir' directory" was encountered during the Angular Library build process

Modifying the return type of an observable using the map operator

Customizing the default font color in Angular Material

Encountering an issue: a function is required to return a value if its declared type is not 'undefined', 'void', or 'any'

Issues with the daterange filter in Angular SlickGrid causing functionality problems

Angular 6 form input value displays incorrectly after dynamically closing a tab

Components for managing Create, Read, Update, and Delete operations

The specified module '...' is identified as a non-module entity and therefore cannot be imported using this specific construct

Steps to activate a button once the input field has been completed

Assigning a value to an angular object

Error in Typescript: Function not being triggered on button click