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

No you cannot remove the await, if you remove the await then the function will return an unresolved promise — Grant, Nov 25 '20 at 10:40
`await` makes the promise wait till its resolved. without it, it would start the request and continue to the next line without waiting — bill.gates, Nov 25 '20 at 10:43

score 2 · Answer 1 · answered Nov 25 '20 at 10:43

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

score 2 · Answer 2 · edited Nov 28 '20 at 15:42

If you remove the await, it doesn't wait for the resolve or reject response from the promise.
What it does is to skip the expression in thread and continues to fetch the second response.
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>
```

Shouldn't we use the `.then(` method in that case? – Alan Kersaudy Nov 25 '20 at 23:03 — Alan Kersaudy, Nov 25 '20 at 23:03
You can use then if you are not in the callback hell. – cangokceaslan Nov 26 '20 at 06:52 — cangokceaslan, Nov 26 '20 at 06:52

Turn callback to promise and using of `await`

2 Answers2