0

I have async func in JS file. And a html page where i want use a result this func.

JS File

async function Tokens_per_owner() {
  let tokens_owner = await contract.nft_tokens_for_owner({account_id: window.accountId.toString() });
  let user_tokens = [];
  
  for (let i in tokens_owner) {
      user_tokens.push(tokens_owner[i]['token_id']);
  }

  return user_tokens;
}

window.onload = async () => {
  const array_user_tokens = await Tokens_per_owner();
};

window.array_user_tokens = array_user_tokens;

and my html page

<script src="./wallet.js"></script>
<script type="text/javascript">
console.log(window.array_user_tokens);</script>

console.log doesnt work. How can i get array_user_tokens in my html page?

Igor
  • 1
  • 2
  • 1
    `array_user_tokens` does not exist on `window`. Even if you make it a global, it's going to be assigned asynchronously. You're better off calling the function and directly using the result instead of assigning it to a global you cannot wait for effectively. – VLAZ Dec 17 '21 at 19:14
  • @VLAZ how can i call async function in html page? i tried – Igor Dec 17 '21 at 20:29

1 Answers1

0

Asynchronous request, in Javascript, can be notoriously hard to understand. Your console.log does not work, since you are running it before the asynchronous request is done. Take, for example, the following snippet. We have an asynchronous function that takes 5 seconds to execute.

const myFunction = async function() {
  await new Promise(resolve => {
    setTimeout(() => resolve(true), 5000);
  });
}

window.onload = async () => {
  await myFunction();
  
  console.log('called from function');
};
<script>
console.log('called from html');
</script>

You can see that, even if the timeout takes only 1 ms, its console.log will be run after the one from the HTML. You have the same problem.

When you want to use an async function, everything that used something from that async function, needs to be async as well.

I'm not sure how you want to use the window.array_user_tokens array, but you should use it after the call to the async function, in the window.onLoad callback.

this question approach this problem very well. I suggest you look into its anwsers.

Nicolas
  • 8,077
  • 4
  • 21
  • 51
  • Thank you. My final goal is to go through the array and create the required number of html elements on the page., Cards. – Igor Dec 17 '21 at 19:30
  • @Igor You would need to create those element in the `window.onload` callback. Otherwise, your array won't exists. To do so, it is possible to use Javascript to add element to your page. I'd suggest you look into that. – Nicolas Dec 17 '21 at 19:37
  • OK. I was reading this post this afternoon. but did not understand. Thanks for the tip about the callback, but I still don't quite understand how to use it correctly in my case. – Igor Dec 17 '21 at 20:19
  • @Igor Look at it like boxes. You can't get anything out of the boxes, but you can use what you've created inside the boxes. Say you have a box that is your `script` tag. Inside this box, there is another box, which is your async `window.onload` function. Since your first box cannot access what's in the other box, you need to do all the work from the second box. In this case, it's the async function `window.onload`. – Nicolas Dec 18 '21 at 16:20