Ajax non blocking call, How other js wait for the object to populate

Question

We have a requirement where we want to make ajax call async = true instead false so that it doesn't block other js, but at the same time we have some js files which are dependent on ajax call success object(using property of that object) - So what would be the best approach/design pattern to implement this

Ajax Call will execute first

$.ajax({
            url: 'someEndPoint',
            async: true,
            success: function (result) {
                window.abc = {};
                result = result.model;
                if (result != undefined) {
                      window.abc = result.model;
                    }
               }

   });

other.js Should wait for abc object to get populated

if(abc.someProperty){
//Do some work
}

its not a possibility as we have so many js dependant of that success object — sumit tandon, Mar 25 '21 at 06:15
See [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321/4642212). — Sebastian Simon, Mar 25 '21 at 06:22
@sumittandon it's the only possibility. there is no otherway. you have an async response and you need to put your code behind that event. doesnt matter if you use callback functions, promises, async/await or observables, the principle stays the same. you have to rearchitecture your code to respect this, because that's a hard given. — Marian Theisen, Mar 25 '21 at 06:26

Yu Miao · Answer 1 · 2021-03-25T08:35:32.757

You need an event bus to handle this.

An event bus is a design pattern that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pub/sub

class EventBus {
  constructor() {
    this.events = new Map();
  }

  on(key, func, ...args) {
    const event = this.events.get(key) || new Map();
    event.set(func, (...newArgs) => {
      func(...args, ...newArgs);
    });
    this.events.set(key, event);
  }

  fire(key, ...args) {
    const event = this.events.get(key) || new Map();
    for (const [_, func] of event.entries()) {
      func(...args);
    }
  }
}

other.js

window.eventsBus = new EventBus();

eventsBus.on("your key", () => {
  if(abc.someProperty){
    //Do some work
  }
})

async ajax

$.ajax({
            url: 'someEndPoint',
            async: true,
            success: function (result) {
                window.abc = {};
                result = result.model;
                if (result != undefined) {
                      window.abc = result.model;
                      window.eventsBus.fire("your key")
                    }
               }

   });

Thanks for your suggestion @Yu Miao Actually we can't wrap other.js property calling as its so many places in this JS and many more js as well So we are thinking some solution which can be placed at central location rather than each and every client — sumit tandon, Mar 25 '21 at 09:27

Ajax non blocking call, How other js wait for the object to populate

1 Answers1