3

I'm trying to move a synchronous call in a lightning component to use ES6 promises. I have an API returning an array of JSON objects that is hosted on Heroku and want to call that into a lightning component.

In the component, if I do the following init:

    doInit: function (component, event, helper) {

    var request = new XMLHttpRequest();
    var url = 'https://orgcontroltower.herokuapp.com/getScores';

    request.open('GET', url);
    request.send();

    console.log(request.response);

}

The response returns with the data as expected in the console - after notifications that xhr is deprecated on the main thread etc..

However, if I then try to do the following (first the doInit):

    doInit: function (component, event, helper) {

    console.log('gonna try this callback thingy');


    //grab the data from the API
    helper.getScores().then(
        $A.getCallback(function(result) {
            console.log(result);
        }),
        $A.getCallback(function(error){
            console.log(error);
        })
    );

}

then the helper:

    getScores: function (component, event) {

    return new Promise($A.getCallback(function (resolve, reject) {

        console.log('entered promise function');

        var req = new XMLHttpRequest();
        var controlTowerURL = 'https://orgcontroltower.herokuapp.com';
        //open the request for data
        req.open('GET', controlTowerURL + '/getScores');

        //if resolved
        if (req.status === 200) {

            // Resolve the promise with the response text
            resolve(req.response);
        }
        else {
            // Otherwise reject with the status text
            // which will hopefully be a meaningful error
            reject(Error(req.statusText));
        }

        req.send();

    }));

This throws an error..

Error
at components/c/singleOrg.js:64
at b (aura_prod.js:sourcemap:819)
at Promise (<anonymous>)
at Object.getScores (components/c/singleOrg.js:42)
at doInit (components/c/singleOrg.js:15)
at J.Vc (aura_prod.js:sourcemap:411)
at Object.c [as pb] (aura_prod.js:sourcemap:302)
at pJ (aura_prod.js:sourcemap:400)
at aura_prod.js:sourcemap:401
at $.C.Ua (aura_prod.js:sourcemap:824)

this approach should work - shouldn't it? I can't see where i'm breaking this, but breaking it I am... i'm sure it's to do with event loops somewhere... :S

2

Broken Promises!! needed to wrap the status in the onload() function! aha! working code below..

({
getScores: function (component, event) {

    return new Promise($A.getCallback(function (resolve, reject) {

        console.log('entered promise function');

        var req = new XMLHttpRequest();
        var controlTowerURL = 'https://orgcontroltower.herokuapp.com';
        //open the request for data
        req.open('GET', controlTowerURL + '/getScores');

        //if resolved
        req.onload = function () {
            if (req.status === 200) {

                console.log('it responsed!');


                // Resolve the promise with the response text
                resolve(req.response);
            }
            else {
                // Otherwise reject with the status text
                // which will hopefully be a meaningful error
                reject(Error(req.statusText));
            }
        };

        req.send();

    }));
}

})

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.