Forum Discussion

mikihiir's avatar
mikihiir
Helper III
7 years ago
Solved

Custom Visual await Promise

Hei   Has anyone tried to await for Promise ? Seems that thread is not blocked  until Promise  returns the answer. it just runs on. Async is working perfectly but when using await for syncronous ...
  • v-evelk's avatar
    v-evelk
    7 years ago

    The second approach must work because it is regular JS behavior. PowerBi Custom Visual code cannot work other way than regular JS flow.

    I suppose that you probably put your code in a wrong place.

    I attached an example of the code that outputs the messages in the next order:

     

    "Async function was started"

    "Set Timeout"

    "Promise result was gotten"

    "Some code after async call!"

     

    <script>
function getPosts() {
   return new Promise((resolve, redject) => {
      setTimeout(() => {
         console.log("Set Timeout");
         resolve(1);
      }, 2000);
   });
}

async function init() {
   console.log("Async function was started");
   await getPosts().then((result) => { console.log("Promise result was gotten") });
}


(async () => {
    try {
        var text = await init();
        console.log("Some code after async call!");
        // other code that must wait for async result must be located here
    } catch (e) {
    }
})();
</script>

     

    Evgenii Elkin,
    Software Engineer
    Microsoft Power BI Custom Visuals
    [email protected]

v-evelk's avatar
v-evelk
Microsoft Employee
7 years ago

It is how async functions work on the top level. They will wait for results only in their chain.

 

However, there are 2 solutions that may solve your question:

1. You can wrap your code in a promise on the top level.

2. You can wrap your code in an immediate async function like below:

 

(async () => {
   try {

      debugger;
      await this.getData();

      debugger;
   } catch (e) {}
})();

 

 

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
[email protected]

mikihiir's avatar
mikihiir
Helper III
7 years ago

Thanks for replying.

 

Tho option 2. is not helping,  code is still not waiting for promise. Can u make an example of option 1 (code in a promise on the top level) ?

 

 

  • v-evelk's avatar
    v-evelk
    Microsoft Employee
    7 years ago

    The second approach must work because it is regular JS behavior. PowerBi Custom Visual code cannot work other way than regular JS flow.

    I suppose that you probably put your code in a wrong place.

    I attached an example of the code that outputs the messages in the next order:

     

    "Async function was started"

    "Set Timeout"

    "Promise result was gotten"

    "Some code after async call!"

     

    <script>
function getPosts() {
   return new Promise((resolve, redject) => {
      setTimeout(() => {
         console.log("Set Timeout");
         resolve(1);
      }, 2000);
   });
}

async function init() {
   console.log("Async function was started");
   await getPosts().then((result) => { console.log("Promise result was gotten") });
}


(async () => {
    try {
        var text = await init();
        console.log("Some code after async call!");
        // other code that must wait for async result must be located here
    } catch (e) {
    }
})();
</script>

     

    Evgenii Elkin,
    Software Engineer
    Microsoft Power BI Custom Visuals
    [email protected]