rxjs: Missing response value on ajax result.

Hi guys,

I’m trying to do a simple ajax call and get a response but i get an answer with null response value.

RxJS version: "rxjs": "^5.0.0-beta.12"

Code to reproduce:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/dom/ajax';

 Observable.ajax({
        url: window.location.origin + "/api/book/load",
        method: "POST",
        responseType: "json",
        body: {
            key: "userKey",
            sessionId: "oisudofiu"
        },
        headers: {
            "Accept": "application/json, text/plain, */*",
            "cache-control": "no-cache"
        }
    }).subscribe(
        xhr => console.log("LOADED ", JSON.stringify(xhr, null, 2)),
        error => console.log("ERROR ", JSON.stringify(error, null, 2)),
        () => console.log("COMPLETE"))

Expected behavior: Get a response with result information

Actual behavior: Missing response information on Ajax response

{
  "originalEvent": {
    "isTrusted": true
  },
  "xhr": {},
  "request": {
    "async": true,
    "crossDomain": false,
    "withCredentials": false,
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "cache-control": "no-cache",
      "X-Requested-With": "XMLHttpRequest",
      "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    "method": "POST",
    "responseType": "json",
    "timeout": 0,
    "url": "http://localhost:8888/api/book/load",
    "body": "key=userKey&sessionId=oisudofiu"
  },
  "status": 200,
  "responseType": "json",
  "response": null
}

Additional information: If i make the same call with axios against the same (jersey) REST endpoint I get back the correct data. The endpoint is configured to ignore params and respond with “Result of book loaded” string. Here is the axios response:

{
  "data": "\"Result of book loaded\"",
  "status": 200,
  "statusText": "OK",
  "headers": {
    "date": "Wed, 05 Oct 2016 16:27:40 GMT",
    "cache-control": "no-cache",
    "expires": "Mon, 01 Jan 1990 00:00:00 GMT",
    "server": "Development/1.0",
    "content-length": "27",
    "content-type": "application/json;charset=utf-8"
  },
  "config": {
    "transformRequest": {},
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "method": "post",
    "baseURL": "http://localhost:8888/api",
    "url": "http://localhost:8888/api/book/load",
    "data": "key=user&sessionId=password"
  },
  "request": {}
}

Thanks a lot for any help.

(EDIT by @blesh to add code color formatting)

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 2
Comments: 16 (3 by maintainers)

Most upvoted comments

Hey guys, a guly workaround is not a solution. ajax.get or ajax.post need to have a response value if ther is any given by the server. I face the same issue here using ajax.post to send params and receive a string. its just null. Its a no go bug. Please fix it as soon as possible or remove the method completely if you cannot make it work to not confuse further developers.

rudolfschmidt on Dec 24, 2018

hey guys! What an interesting problem! This issue was opened since 2016, back in the day, i did’nt know anything about coding. Today i know it and wanna share a little bit.

1, loading chartjs from a CDN using rxjs/ajax:

ajax("https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js")
    .subscribe(
        data => {
            console.log(data.response);
        },
        error => console.error(error)
);
/*
RESULT:  null
*/

I tended to give up and made friend with axios But googling let me found this issue 2, loading with some config configured:

ajax({
  url: "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js",
  responseType: "blob"
}).subscribe(
  data => {
    const script = document.createElement("script");
    script.src = URL.createObjectURL(data.response);
    document.body.appendChild(script);
    script.onload = function() {
      console.log(typeof Chart);
    };
  },
  error => console.error(error)
);

/*
   RESULT: 'function' meaning chartjs was fetched successfully. Lol
*/

Thank you for your help!

iamleson98 on Apr 28, 2020