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.

2 Answers 2


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});
  • Not worked for me
    – Mihir
    Jan 2, 2020 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(); }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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