topic Re: Custom Visual await Promise in Custom Visuals Development Discussion

Custom Visual await Promise

mikihiir — Sun, 24 Feb 2019 18:21:43 GMT

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 then not working ?

code example ->

Thanks in advance !

Re: Custom Visual await Promise

v-evelk — Tue, 26 Feb 2019 08:35:49 GMT

Hi,

Aync will not work for synchronous code because it is syntax error

Why thread must be blocked?

You called async function as sync and it creates a Promise that is async but in fact will be called immediatelly, but you called setTimeout inside that is asynchronous too.

Evgenii Elkin,

Software Engineer

Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

Re: Custom Visual await Promise

mikihiir — Tue, 26 Feb 2019 17:55:48 GMT

I want the thread to wait until promise return the result

Re: Custom Visual await Promise

mikihiir — Tue, 26 Feb 2019 18:19:09 GMT

private storage: ILocalVisualStorageService -> API which returns storage info.

Problem is, that thread is not waiting for promise result, it moves on. Here is the example code.

Re: Custom Visual await Promise

v-evelk — Wed, 27 Feb 2019 08:10:01 GMT

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
pbicvsupport@microsoft.com

Re: Custom Visual await Promise

mikihiir — Wed, 27 Feb 2019 20:56:54 GMT

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) ?

Re: Custom Visual await Promise

v-evelk — Thu, 28 Feb 2019 13:14:17 GMT

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
pbicvsupport@microsoft.com

Re: Custom Visual await Promise

Schizzomarino — Thu, 20 Feb 2020 10:52:37 GMT

I for one, still can't get this to work

I have created a new post (https://community.powerbi.com/t5/Custom-Visuals-Development/Can-t-get-async-wait-to-work-in-any-form-or-shape-within-a/m-p/936229#M2991) enquiring about this.

I am thinking that either I am not pointing my custom viz correctly to esnext or I am putting the async logic in the wrong place...

Re: Custom Visual await Promise

dm-p — Thu, 20 Feb 2020 20:49:17 GMT

Hopefully this post will clarify for SDK v3.