Turn callback to promise and using of `await`

Question

I've found this sample snippets in this article :

<script>
    async function get_data() { // async function
        await $.get('https://url.com/one')
        await $.get('https://url.com/two')
        let res = await $.get('https://url.com/three')
        console.log(res)
    }
</script>

Which is the promised version of :

<script>
    function get_data() {
        $.get('https://url.com/one', () => {
            $.get('https://url.com/two', () => {
                $.get('https://url.com/three', (res) => {
                    console.log(res)
                })
            })
        })
    }
</script>

My question being, in the promised version, can we turn await $.get('https://url.com/one') into await $.get('https://url.com/one') as it is the first promise?
If yes, why would either one of both be considered as best practice?
Thank you in advance

Answer 1

If you want the call to url.com/two to run after url.com/one is done, you have to await the promise returned.. However, if you want all of them to run at the same same time, you can remove the await, and pass the 2 promises into a Promise.all([promise1,promise2, promise3]) which you can await

Answer 2

1. If you remove the await, it doesn't wait for the resolve or reject response from the promise.

2. What it does is to skip the expression in thread and continues to fetch the second response.

3. The first snippet is the best practice because you will get the callback hell for your code. Think about the page where you need to send 20 requests and think about callbacks. No-one can understand what request is sent from where. So with Promises, you can just wait or skip the task (if you skip, it will run in the background). So hierarchy on code structure doesn't change. Another problem is when you need to return the response to the variable. You need to put such a structure.

   <script>
   function get_data() {
       let res = $.get('https://url.com/one', () => {
           return $.get('https://url.com/two', () => {
               return $.get('https://url.com/three', (res) => {
                   console.log(res)
                   return res;
              })
           })
       })
   }
   </script>