How to deal with asynchronous functions without promises?

Question

I started doing web-app development with angularJS which comes with a promise library but now I have to work on another project without one. How would I do this without having to import a promise library.

I've removed some of the irrelevant things but basically I need to get a file url from the backend, create an element based on this url, and then return the element. The thing is once I go inside the async function, I don't know how to get back out to return the created element.

        var userLogoAWS = null;
        $.get("http://localhost:8080/apps/admin/file",
               {
                category: category,
                filename: "logo.png"
               },
               function(data){
                userLogoAWS = data;
               });

        img.src   = userLogoAWS;

        //---- Create and Combine elements ----
        var element = anchor.appendChild(img);

        return element;

you are using jquery, so you _have_ a promise library: the `Deferred` object is your freind — collapsar, Apr 08 '14 at 21:22
Hmm...didn't know that. I read somewhere about a "q" library so I thought people were using that. I'm going to check out jQuery's. BTW, is there no way to deal with this without promises? — user2483724, Apr 08 '14 at 21:25
`return $.get("http://...",{}).then(function(result){ var img = new Image(); img.src = result; anchor.appendChild(img);return img});` Should do the trick. — Benjamin Gruenbaum, Apr 08 '14 at 21:29

score 1 · Answer 1 · answered Apr 08 '14 at 22:00

You can't return the created element. period. Fortunately for you though, you're using jQuery which comes with it's own deferred/promise system so you can continue with the promise setup you're used to.

function doSomething() {
    return $.get("http://localhost:8080/apps/admin/file", {
        category: category,
        filename: "logo.png"
    });
}
doSomething().done(function(data){
    var img = new Image();
    img.src = data;
    //---- Create and Combine elements ----
    var element = anchor/*where is anchor defined?*/.appendChild(img);
});

shanks · Accepted Answer · 2014-04-08T22:36:33.247

I would take advantage of a simple callback pattern in this case. there are a lot of ways to do this but the key thing is passing a function that handles the success of the ajax call as an argument to the function that makes the ajax call.

function getLogo(createElement){
   $.get("http://localhost:8080/apps/admin/file",
               {
                category: category,
                filename: "logo.png"
               },
               function(data){
                 createElement(data)
               });
}

function createElement(logo){
   var img = new Image();
   img.src = logo;
   var element = anchor.appendChild(img);
   return element; //or assign element to a global variable
}

var element = getLogo(createElement);

if this does not work, JQuery has a promise library and it seems you are using jquery, so why not take advantage of that.

score -1 · Answer 3 · answered Apr 08 '14 at 21:24

-1

you are using jquery, so you have a promise library: the Deferred object is your friend. See in particular the docs on the .promise method.

answered Apr 08 '14 at 21:24

collapsar

17,010
4
35
61

I don't understand how this is an attempt to answer the question at all. – Benjamin Gruenbaum Apr 08 '14 at 21:30
@BenjaminGruenbaum quote OP: 'I started doing web-app development with angularJS which comes with a promise library but now I have to work on another project without one. How would I do this without having to import a promise library.'. Which basically states, that he would know how to proceed if he had a promise library at his disposal. His code sample includes a jquery method call. jquery comes with a promise object. hence my answer that put the strings together. for details, read kevinb's answer. – collapsar Apr 08 '14 at 22:34

How to deal with asynchronous functions without promises?

3 Answers3

Linked