How to call an async function
according to async_function MDN
Return value
A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.
async function will always return a promise and you have to use .then() or await to access its value
async function getHtml() { const request = await $.get('https://jsonplaceholder.typicode.com/posts/1') return request}getHtml() .then((data) => { console.log('1')}) .then(() => { console.log('2')}); // OR (async() => { console.log('1') await getHtml() console.log('2')})()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You should await the async function, if want to wait for it to resolve before continuing or use .then()
await getHtml();console.log('2');or
getHtml() .then(() => { console.log('2'); });
Putting the async keyword before a function makes it an asynchronous function. This basically does 2 things to the function:
- If a function doesn't return a promise the JS engine will wrap this value into a resolved promise. Thus, the function will always return a promise.
- We can use the
awaitkeyword inside this function now. Theawaitkeyword makes it possible to 'wait' for a promise to be resolved. Which lets us write asynchronous code in a synchronous way. For example this tutorial.
In your example the console.log(2) will always finish first because in a JS application always the synchronous code will finish first before the asynchronous code. Promises are always asynchronous and thus are async fucntions as the name implies also asynchronous. For more on this check out the event loop.