How I can return XMLHttpRequest response from function? [duplicate]

Question

Value isn't replace and function return 0. How to fix it? (react-native 0.30, IOS 10.0 Simulator)

export function getCategoryList() {
  var xhr = new XMLHttpRequest();
  jsonResponse = null;

  xhr.onreadystatechange = (e) => {
    if (xhr.readyState !== 4) {
      return;
    }

    if (xhr.status === 200) {
      console.log('SUCCESS', xhr.responseText);
      jsonResponse = JSON.parse(xhr.responseText);
    } else {
      console.warn('request_error');
    }
  };

  xhr.open('GET', 'https://httpbin.org/user-agent');
  xhr.send();

  return jsonResponse;
}

The request is asynchronous, which means that the request is sent, your function returns a null value and then some time later the request is completed. Look at passing a callback function into getCategoryList() (easy) or promises (a bit more difficult, but not much). — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Aug 8, 2016 at 12:47

Nicholas Robinson · Accepted Answer · 2016-08-08 12:53:41Z

9

You can't return the value like that.

I would suggest going with either callbacks or promises:

Callback:

function getCategoryList(callback) {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = (e) => {
    if (xhr.readyState !== 4) {
      return;
    }

    if (xhr.status === 200) {
      console.log('SUCCESS', xhr.responseText);
      callback(JSON.parse(xhr.responseText));
    } else {
      console.warn('request_error');
    }
  };

  xhr.open('GET', 'https://httpbin.org/user-agent');
  xhr.send();
}

getCategoryList(data => console.log("The data is:", data));

Promises:

function getCategoryList() {
  var xhr = new XMLHttpRequest();

  return new Promise((resolve, reject) => {

    xhr.onreadystatechange = (e) => {
      if (xhr.readyState !== 4) {
        return;
      }

      if (xhr.status === 200) {
        console.log('SUCCESS', xhr.responseText);
        resolve(JSON.parse(xhr.responseText));
      } else {
        console.warn('request_error');
      }
    };

    xhr.open('GET', 'https://httpbin.org/user-agent');
    xhr.send();
  });
}

getCategoryList().then(res => console.log("The result is", res));

answered Aug 8, 2016 at 12:53

Nicholas Robinson

1,4291 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

baptx Over a year ago

So with AJAX, this means that there is no way to use a simple function call like getCategoryList() that will return data? This would be much more convenient. Update: it looks like the closest solution is to use async / await but then you still cannot call the function directly, you have to call it with the await keyword before the function name (even if you nest the await function call in another function, await is needed to call the other function too): stackoverflow.com/questions/48969495/…

score 1 · Accepted Answer · 2016-08-08 13:05:52Z

1

You can return the request response if XHR is synchronous (xhr.open('GET', 'https://httpbin.org/user-agent', false)), doing a infinite loop that breaks when the request is finished.

Notes:

Synchronous XHR is deprecated;
Infinite loop will stop the page while XHR isn't finished (e.g, a game).

function getCategoryList() {

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://httpbin.org/user-agent", false);
    xhr.send();

    // stop the engine while xhr isn't done
    for(; xhr.readyState !== 4;)

    if (xhr.status === 200) {

        console.log('SUCCESS', xhr.responseText);

    } else console.warn('request_error');

    return JSON.parse(xhr.responseText);
}

edited Aug 8, 2016 at 13:05

answered Aug 8, 2016 at 12:54

user5066707

2 Comments

kaminarifox Over a year ago

Synchronous http requests are not supported

user5066707 Over a year ago

@iwasmusic They're, but deprecated, then they'll be removed in the future. That's what you wanted ("How can I return XMLHttpRequest response from...").

Collectives™ on Stack Overflow

How I can return XMLHttpRequest response from function? [duplicate]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related