[async] await - promise - callback

evolution

callback(() => { console.log(1) })
promise.then(() => { console.log(1) })
- promise.all()
await
```
await a();
console.log(1) 
```

await async

await 只能加在返回值是 promise 的方法之前
- await a();
- ~~await function hhh() {}~~: error
一个函数内有 await 那么这个函数之前必须加 async
一个函数有 async，则表示这个函数内部是同步的，但是调用这个函数的地方再不加 await 是则会被异步处理

// created 这个方法内部是同步执行的
async acted() {
      console.log('start child')
      await this.setTimeout() //  console.log(111)
      console.log('child over1')
},

// 近似: start a -- child a -- 同步执行 this.created()
function a() {
      console.log('start a')
      this.created()
      console.log('child a')
}

// start a --  同步执行 this.created() -- child a
async function a() {
      console.log('start a')
      await this.created()
      console.log('child a')
}

promise

// async 是必须的
async function a() {
      console.log('start a')
      await this.created()
      console.log('child a')
}

// 这里的 async  可以写也可以不写
async function setTimeout() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(111)
            resolve()
        }, 1000)
     })
    return promise
}

code

result

start parent
test.html:33 2222
test.html:23 child over1
test.html:63 111
test.html:57 parent over

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
<script>

    let myComponent = {
        data() {
            return {
            }
        },
        async created() {
            console.log('start child')
            await this.setTimeout()
            console.log('child over1')
            // this.setTimeout().then(() => {
            //     console.log('child over')
            // })

        },
        methods: {
            setTimeout() {
                let promise = new Promise((resolve, reject) => {
                    setTimeout(() => {
                        console.log(2222)
                        resolve(111)
                    }, 500)
                })
                return promise
            }
        },
        template: `
            <div class="my-component">
                my test component
                <br>
            </div>
        `
    }

    const app = new Vue({
        el: '#app',
        components: {
            myComponent
        },
        async created() {
            console.log('start parent')
            await this.setTimeout()
            console.log('parent over')
        },
        methods: {
            setTimeout() {
                let promise = new Promise((resolve, reject) => {
                    setTimeout(() => {
                        console.log(111)
                        resolve()
                    }, 1000)
                })
                return promise
            }
        }
    })
</script>

</html>

result

start parent
parent over
start child
child over1
2222
111

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
<script>

    let myComponent = {
        data() {
            return {
            }
        },
         created() {
            console.log('start child')
             this.setTimeout()
            console.log('child over1')
            // this.setTimeout().then(() => {
            //     console.log('child over')
            // })

        },
        methods: {
            setTimeout() {
                let promise = new Promise((resolve, reject) => {
                    setTimeout(() => {
                        console.log(2222)
                        resolve(111)
                    }, 500)
                })
                return promise
            }
        },
        template: `
            <div class="my-component">
                my test component
                <br>
            </div>
        `
    }

    const app = new Vue({
        el: '#app',
        components: {
            myComponent
        },
         created() {
            console.log('start parent')
             this.setTimeout()
            console.log('parent over')
        },
        methods: {
            setTimeout() {
                let promise = new Promise((resolve, reject) => {
                    setTimeout(() => {
                        console.log(111)
                        resolve()
                    }, 1000)
                })
                return promise
            }
        }
    })
</script>

</html>

reference

https://juejin.im/post/5c95ee98f265da60dd354c6c
vue online tool: https://codepen.io/madman0621/pen/vQyBPB

Alice52 / vue-tutorial

[async] await - promise - callback #2

evolution

await async

code

reference