2

i have a getJSONP function that is being called from inside a prototype function. I am passing a JSON object to that function and changing values inside it, i want to be able to use the updated object after it's ready but i can't seem to return the object, only call a different function from the callback and use it there.

I thnink i understand the concept of promises but how can i change my function into a promise and use it when it is ready?

this is the getJSONP function:

function getJSONP(url, success) {
  var ud = '_' + +new Date,
    script = document.createElement('script'),
    head = document.getElementsByTagName('head')[0] || document.documentElement;

  window[ud] = function(data) {
    head.removeChild(script);
    success && success(data);
  };

  url += '?callback=' + ud;
  script.src = url;
  head.appendChild(script);
};

And this is how i use it:

MyClass.prototype.mySpecialFunction = function(myObject) {
    getJSONP(myURL,function(data) {
      //doing alot of stuff
      ...
      //myObject.myArr = code the pushes a lot of stuff into an array
      workWithTheNewArray(myObject) // where i work with the full array
    });
});

please take into account that i am not using jQuery (because of performance and size), but i am using jqlite.

Tomalak
  • 332,285
  • 67
  • 532
  • 628
FireBrand
  • 463
  • 5
  • 16
  • what promise you mean? [native Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) or from some library? – Grundy Jul 28 '15 at 09:54
  • @Grundy to tell you the truth i'm not sure... i think native would be the lightest option here(or am i wrong?) how well would it support IE9 ? – FireBrand Jul 28 '15 at 10:01
  • mdn say IE not supported Promise, even 11. i mean native promise. Also as i see jqlite - have no own promise? – Grundy Jul 28 '15 at 10:03
  • I'm not sure why you want to use promises here? Is the callback not enough? – Tomalak Jul 28 '15 at 11:23
  • @Tomalak it's just that i need to return that object and use the new data i pushed in it's array and that ```return``` happens way before the data i need gets back – FireBrand Jul 28 '15 at 11:30
  • [You cannot return data from an asynchronous method.](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) Again: Why not simply use the callback? There is no reason whatsoever to introduce another 3rd-party library dependency for this. – Tomalak Jul 28 '15 at 12:32
  • possible duplicate of [How do I convert an existing callback API to promises?](http://stackoverflow.com/q/22519784/1048572) – Bergi Jul 28 '15 at 12:53
  • @Bergi , I went over that question as well as others, it just wasn't clear to me how to apply it to my situation, i don't think it's a duplicate, just a more specific question, but maybe i'm wrong :) – FireBrand Jul 28 '15 at 13:34
  • @FireBrand: Yeah, but specific questions still can have generic duplicates :-) Also I didn't know whether you had seen it before, that's why I linked it (notice I didn't close - yet). It would've been helpful if you could have stated that you read it already, and tried something (but weren't sure?) and showed us the attempt. Or otherwise *please help us* improving the canonical reference by telling us what exactly has been left unclear there! Does it need better examples? A step-by-step howto? – Bergi Jul 28 '15 at 13:39
  • @Bergi you're right, i should have mentioned what other questions i've investigated. a step-by-step howto would be great! I couldn't (and still can't) comment on the question for i haven't gained enough reputation yet :) – FireBrand Jul 28 '15 at 13:49

1 Answers1

2

how about using a pormise polyfill, they claim it is lightweight and supports IE, then you can give the below code a try:

function getJSONP(url, success) {
  return new Promise(function(resolve, reject){
    var ud = '_' + +new Date,
    script = document.createElement('script'),
    head = document.getElementsByTagName('head')[0] || document.documentElement;

    window[ud] = function(data) {
      head.removeChild(script);
      resolve(data);
    };

    url += '?callback=' + ud;
    script.src = url;
    head.appendChild(script);
  });
};

MyClass.prototype.mySpecialFunction = function(myObject) {
    return getJSONP(myURL).then(function(data) {
      //doing alot of stuff
      ...
      //myObject.myArr = code the pushes a lot of stuff into an array
      workWithTheNewArray(myObject) // where i work with the full array
    });
});
mido
  • 24,198
  • 15
  • 92
  • 117
  • And how would i work with things outside of ```MyClass.prototype.mySpecialFunction``` that are waiting for it to finish? would a ```return``` inside the anonymous function work? – FireBrand Jul 28 '15 at 11:10
  • 1
    @FireBrand updated code, changed to `return getJSONP..` – mido Jul 28 '15 at 11:32
  • Ok, so how should the call to ```mySpecialFunction``` change from ```MyClass.mySpecialFunction(myObject)```? – FireBrand Jul 28 '15 at 11:59
  • 1
    Alright, i've played with this a little bit and changed to ```var prom = MyClass.mySpecialFunction(myObject)``` i managed to get it working, thanks! – FireBrand Jul 28 '15 at 12:25
  • Probably a better idea to use the core js polyfill, also there is no error handler here as Bergi mentioned. It's probably for the better to use `fetch` here and polyfill _that_ instead. – Benjamin Gruenbaum Jul 28 '15 at 13:18
  • @BenjaminGruenbaum do you or Bergi mind to elaborate? i would love to get more info and options – FireBrand Jul 28 '15 at 13:36
  • 1
    This answer is perfectly fine, and mido spent time writing it. Just because I have more experience doesn't make me more right. If I add an answer the only benefit it'll have is that it'll have my name on it and that's not really a benefit at all. All I suggested (which is comment worthy at best) is that browsers already contain a promisified API for requests called `fetch` and if you need to support older browsers you can just polyfill _that_. Regardless, you should not use JSONP anyway (use CORS http://enable-cors.org/) – Benjamin Gruenbaum Jul 28 '15 at 13:39
  • mido's answer works perfectly for me, just wanted to make sure i wasn't missing anything (like the ```error``` handler from Bergi's comment), thanks for all your help guys! – FireBrand Jul 28 '15 at 13:52