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

      .then((client: AadHttpClient): void => {
          .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>`;

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

Is there something I am missing.


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>
            <FieldRef Name="Title"/>
            <FieldRef Name="ID"/>
            <FieldRef Name="EventDate"/>
            <FieldRef Name="Location"/>
.then((response: SPHttpClientResponse) => response.json())
.then((response: any) => {
 if (response && response.Row && response.Row.length > 0) {
   let varitems =response.Row;
   myComp.setState({items: varitems});
| improve this answer | |
  • Not worked for me – Mihir Jan 2 at 14:23

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.