Async/Await, returned variable is undefined after XHR request

Question

I am attempting to get a public IP address from an API and then having that IP to be used inside another function (ninjaUniqueVisitorRequest()).

I have the following code:

function ninjaGetIp() {
    var ipRequest = new XMLHttpRequest();
    ipRequest.open('GET', "https://api.ipify.org?format=jsonp=", true);
    ipRequest.send();
    ipRequest.onload = function () {
        if (ipRequest.status >= 200 && ipRequest.status < 400) { // If response is all good...
            return ipRequest.responseText;
        } else {
            console.log('There was an error retrieving the public IP.');
            return '127.0.0.1'; 
        }
    }
}

async function ninjaUniqueVisitorRequest() {
    // var ninjaSiteUuid = ninjaGetSiteUuid();
    // var ninjaFingerprint = await ninjaGetFingerprint();
    var ninjaPublicIp = await ninjaGetIp();
    console.log(ninjaPublicIp);
}

Currently, when I run ninjaUniqueVisitorRequest(); the console.log(ninjaPublicIp); returns undefined.

I kind of understand that it returns straight away before the request has been made however thats what I thought I was fixing by using async/await.

Any ideas are appreciated! PHP guy over here, go easy on me.

Your `ninjaGetIp()` function is not `async` and does not return a Promise. — Pointy, Jan 25 '19 at 00:26
I thought you simply put `async` on the function you're calling from. Also from my understanding `return xyz` will be converted to a promise anyway? I'm compiling with Babel. — KriiV, Jan 25 '19 at 00:27
@KriiV it would be converted to a promise if you had _any_ `return` there and if you marked it with `async`. `ninjaGetIp` returns nothing. — zerkms, Jan 25 '19 at 00:28
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Jan 25 '19 at 00:44

Jojo Narte · Accepted Answer · 2020-11-17T01:54:08.773

Currently your ninjaGetIp is not an awaitable Promise.

You can try just returning a new Promise that wraps the implementation or just add async keyword before the function.

function ninjaGetIp() {
    return new Promise(function (resolve, reject) {
        var ipRequest = new XMLHttpRequest();
        ipRequest.open('GET', "https://api.ipify.org?format=jsonp=", true);
        ipRequest.send();
        ipRequest.onload = function () {
            if (ipRequest.status >= 200 && ipRequest.status < 400) { // If response is all good...
                return resolve(ipRequest.responseText);
            } else {
                console.log('There was an error retrieving the public IP.');
                return resolve('127.0.0.1'); 
            }
        }
    });
    
}

Async sample

async function ninjaGetIp() {
            var ipRequest = new XMLHttpRequest();
            ipRequest.open('GET', "https://api.ipify.org?format=jsonp=", true);
            ipRequest.send();
            ipRequest.onload = function () {
                if (ipRequest.status >= 200 && ipRequest.status < 400) { // If response is all good...
                    return ipRequest.responseText;
                } else {
                    console.log('There was an error retrieving the public IP.');
                    return '127.0.0.1'; 
                }
            }
        
    }

mwilson · Answer 2 · 2019-01-25T00:40:12.230

That's because ninjaGetIp is not awaitable. You have to return a Promise in order to be able to await.

   async function ninjaGetIp() {
        return new Promise( (resolve, reject) => {
            var ipRequest = new XMLHttpRequest();
            ipRequest.open('GET', "https://api.ipify.org?format=jsonp=", true);
            ipRequest.send();
            ipRequest.onload = () => {
                if (ipRequest.status >= 200 && ipRequest.status < 400) { // If response is all good...
                    resolve(ipRequest.responseText);
                } else {
                    console.log('There was an error retrieving the public IP.');
                    reject('127.0.0.1');
                }
            }
        });

    }

Also, you can simplify it and use fetch which returns a promise instead of using all the code required to build up an XMLHttpRequest:

async function ninjaGetIp() {
    return fetch('https://api.ipify.org?format=jsonp=');
}

TL;DR;

If you want to stick with XMLHttpRequest, I would create a wrapper for it because it's a lot of redundant code: Here's an example:

class HttpClient {
    constructor(){}
    async get(url) {
        return new Promise( (resolve, reject) => {
            const xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = (evt) => {
                if (evt.currentTarget.readyState === 4 && evt.currentTarget.status === 200) {
                    try {
                        const response = JSON.parse(evt.currentTarget.response);
                        resolve(response);
                    } catch (exception) {
                        reject(exception);
                    }
                }
            };
            xhttp.open('GET', url, true);
            xhttp.send();
        });
    }
    async post(url, data) {
        return new Promise( (resolve, reject) => {
            const xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = (evt) => {
                if (evt.currentTarget.readyState === 4 && evt.currentTarget.status === 200) {
                    try {
                        const response = JSON.parse(evt.currentTarget.response);
                        resolve(response);
                    } catch (exception) {
                        reject(exception);
                    }
                }
            };
            xhttp.open('POST', url, true);
            xhttp.send(data);
        });
    }
}

Usage

const httpClient = new HttpClient();
const data = await httpClient.get('some url');

I'm using XHR for compatibility purposes... Not sure if that's correct though. — KriiV, Jan 25 '19 at 00:30
`XHR` still has functionality not present in `fetch` - so, it is perfectly cromulent to use XHR - however, the code in the question does not use any of this functionality — Jaromanda X, Jan 25 '19 at 00:30
Your `HttpClient` leaves the promise unsettled if the response has an error code. You're also repeating a lot of code that could easily be shared between `get()` and `post()` methods. — Patrick Roberts, Jan 25 '19 at 01:46
Agreed. There is alot of work to do in this to make it production ready. This was a quick example of how to throw his existing code and wrap it in a class. Not to mention it is lacking the rest of the HTTP verbs (PATCH, DELETE, PUT, etc...) — mwilson, Jan 25 '19 at 02:10

Async/Await, returned variable is undefined after XHR request

2 Answers2