Problems encountered in rewriting promise to async/await

the demo code is as follows:

test async</button>
    </div>

    <script>
        new Vue({
            el: "-sharpapp",
            methods: {
                // setTimeout
                getFoo() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve()
                        }, 5000)
                    })
                },
                getBar() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve()
                        }, 1000)
                    })
                },
                // getBarSuccessgetFooSuccess
                // resolvecallback
                getResult() {
                    this.getFoo().then(res => {
                        alert("getFooSuccess")
                    })
                    this.getBar().then(res => {
                        alert("getBarSuccess")
                    })
                },
                // getFooSuccessgetBarSuccess
                // barPromiseresolvealert("getBarSuccess")
                async getResult2() {
                    const fooPromise = this.getFoo()
                    const barPromise = this.getBar()
                    await fooPromise
                    alert("getFooSuccess")
                    await barPromise
                    alert("getBarSuccess")
                }     
            }
        })
    </script>
</body>

</html>

the problem encountered is:
now I want to change the getResult () method, which is called promise , to use ES7"s async/await . The hope is that there are two unrelated requests. Which request is completed first, which request"s callback is executed first, but it seems impossible to use async/await instead.
ask the bosses for advice, or is it impossible to use async/await in this scenario?
Thank you very much!


if your getFoo and getBar requests are changed to order-independent
, then you can

// getFoo
axios.get(xxx).then(() => {// })
// getBar
axios.get(xxx).then(() => {// })

you don't need to wait for the result to be returned, you need await , which means a few things. Don't await for the sake of await .


the owner should first take a look at the official document of async/await, which says on MDN: the call to await is still running sequentially, which means that the second await will wait until the end of the first await. This allows the code to run in 2 seconds instead of 3 seconds. These 2 seconds are determined by the slowest timer.
so there are two key points in this sentence: async/await is executed sequentially, and the time of await is determined by the slowest timer. Your async function is not written correctly.


Promise.race learn about


const fooPromise = this.getFoo()
const barPromise = this.getBar()
//js

//OK
async getResult2() {
    const fooPromise = await this.getFoo()
    alert('getFooSuccess')
    const barPromise = await this.getBar()
    alert('getBarSuccess')
}     
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7b33e9-24d2b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7b33e9-24d2b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?