SPFX JSOM - call a named function from executeQueryAsync

Question

Apologies in advance for the newbie question as I believe this is actually a fairly simple issue. I am using JSOM and in my WebBart.ts file have a named function that queries a list and produces front-end output. It works without issues:

      private PopulateExistingVacancies(): void {
      ...
      }

In a different function (triggered via an event listener), I do an asynchronous call:

    protected FinalizeVacancy(): void {

                context.load(newVacancyListItem);

                // Execute the asynchronous operation and on success update status 
                // and attempt to run additional (pre-defined logic) 
                context.executeQueryAsync(function () {
                    (<HTMLDivElement>(document.getElementById("lblMsgInfo"))).innerText = "New Vacancy entry has been created";
                    this.PopulateExistingVacancies();
                  },
                  function (sender, args) {
                    (<HTMLDivElement>(document.getElementById("lblMsgError"))).innerText =
                      "Error encountered adding new Vacancy entry: " + args.get_message();
                  }
                );

On success, I would like to actually call PopulateExistingVacancies(), but I don't think this is possible (or at least it won't work).

So my question is, what is the proper way to call a pre-written function from an anonymous function which is executed upon an asynchronous success?

Thanks in advance.

Answer 1

Since you're using Spfx, why are you using JSOM? You should be using sphttp service and even better PnP JS for your tasks. Those libraries Wil handle the asynchronous calls for you, and Spfx provides you with the context already so you don't have to initialize context through JSOM.

Answer 2

Mohamed - following your suggestion, I re-programmed the web-part using PnP JS and the grid refresh works without issues. I'm still not sure why this is a problem with the original JSOM setup but with PnP - I was able to plug it into the list item addition success without any issues. Thank you very much.