Failed to execute 'json' on 'Response': body stream is locked

Question

I am following this article and get the following error in the console.log

Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream is locked
    at e.json (sp-pages-assembly_en-us_5d8862cf2c0cc1538b9ce027f59ea4e9.js:1133)

The code from the article is as below

 **this.context.aadHttpClientFactory
      .getClient('https://tenant.onmicrosoft.com/6b347c27-f360-47ac-b4d4-af78d0da4223')
      .then((client: AadHttpClient): void => {
        client
          .get('https://myfunction.azurewebsites.net/api/CurrentUser', AadHttpClient.configurations.v1)
          .then((response: HttpClientResponse): Promise<JSON> => {
            return response.json();
          })
          .then((responseJSON: JSON): void => {
            //Display the JSON in a table
            var claimsTable = this.domElement.getElementsByClassName("azFuncClaimsTable")[0];
            for (var key in responseJSON) {
              var trElement = document.createElement("tr");
              trElement.innerHTML = `<td class="${styles.azFuncCell}">${key}</td><td class="${styles.azFuncCell}">${responseJSON[key]}</td>`;
              claimsTable.appendChild(trElement);
            }
          });**

In the second .then chain the JSON object is undefined and also the response.json() is empty.

Is there something I am missing.

Answer 1

I too faced the same issue when calling a REST service in my REACT component of an SPFX web part. When I changed the REST call from "GET" to "POST", the error disappeared. Eg :

this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)  
.then((response: SPHttpClientResponse) => {  
    if (response.ok) {  
        response.json().then((responseJSON) => {  
        if (responseJSON!=null){  
            let items:ISPList = responseJSON; 
            this._buildSharePrice(items) ;
            }  
        });  
    }  
});  

the above code fails but the below code succeeds

   this.props.spcontext.post(restPI, SPHttpClient.configurations.v1, {
  body: JSON.stringify({
  parameters: {
  RenderOptions: 2,
  ViewXml: `<View>
          <ViewFields>
            <FieldRef Name="Title"/>
            <FieldRef Name="ID"/>
            <FieldRef Name="EventDate"/>
            <FieldRef Name="Location"/>
          </ViewFields>
        </View>`} 
})
})
.then((response: SPHttpClientResponse) => response.json())
.then((response: any) => {
 if (response && response.Row && response.Row.length > 0) {
   let varitems =response.Row;
   myComp.setState({items: varitems});
  console.log(response.Row);      
}
});

Answer 2

I had the same error behavior by calling an api endpoint that responded with empty content, which is not valid json. In that case the response.status is 204 (No-Content) and the json parsing / resolving can be skipped.

if (response.status === 204) { // resolve } else { return response.json(); }