simple await/async help

hanchan

I’m trying to wrap my head around how to use await/async in a template.

The end result would be scraping a website and search for specific data but I’m unable to get my code to wait until a function is executed before proceeding.

Here is some test code to help me figure out await/async:

<template>
  <div>
    <q-btn label="test btn" @click="testMethod()"/>
  </div>
</template>

<script>
  async function testAsync1(){
    const t = await testAsync2();
    console.log('t: ' + t);
  }

  async function testAsync2(){
    setTimeout(function(){
      return 'test async text';
    }, 333);
  }

  export default {
    name: 'test',
    data(){
      return{}
    },

    methods:{
      testMethod(){
        testAsync1();
      },
    },
  }
</script>

The result of pressing the “test btn” button should be an output in the console like this: “t: test async text” but instead I get “t: undefined”.

Could someone please point me in the right direction with this? I would really appreciate it.

Thanks!

dobbel

@hanchan This will help:

https://stackoverflow.com/questions/33289726/combination-of-async-function-await-settimeout

hanchan

Ah! Thanks a lot for that link. I guess my trying to figure out away/async with setTimeout was a very bad idea.

I really appreciate the help!