promise async await

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>button</div>
    <script>
        const div=document.querySelector('div')
        div.addEventListener('click',async ()=>{
            const b1=await new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest()
                xhr.open('GET','server/a.php')
                xhr.onload=function(){
                    resolve(JSON.parse(this.responseText))
                }
                xhr.send()
            })
            console.log(b1)
            const b2=await new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest()
                xhr.open('GET',`server/b.php?a=${b1.a}&b=${b1.b}`)
                xhr.onload=function(){
                    resolve(JSON.parse(this.responseText))
                }
                xhr.send()
            })
            console.log(b2)
            const b3=await new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest()
                xhr.open('GET',`server/c.php?c=${b2.c}&d=${b2.d}`)
                xhr.onload=function(){
                    resolve(JSON.parse(this.responseText))
                }
                xhr.send()
            })
            console.log(b3)
        })
        async function fn(){
            const b1=await new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest()
                xhr.open('GET','server/a.php')
                xhr.onload=function(){
                    resolve(JSON.parse(this.responseText))
                }
                xhr.send()
            })
            console.log(b1)
            const b2=await new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest()
                xhr.open('GET',`server/b.php?a=${b1.a}&b=${b1.b}`)
                xhr.onload=function(){
                    resolve(JSON.parse(this.responseText))
                }
                xhr.send()
            })
            console.log(b2)
            const b3=await new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest()
                xhr.open('GET',`server/c.php?c=${b2.c}&d=${b2.d}`)
                xhr.onload=function(){
                    resolve(JSON.parse(this.responseText))
                }
                xhr.send()
            })
            console.log(b3)
        }
        console.log('before')
        fn()
        console.log('after')
        setTimeout(()=>{
            console.log(22222222)
        },1000)
    </script>
</body>
</html>