• js中的async await


    转载:https://www.cnblogs.com/hanguozhi/p/10406765.html

    JavaScript 中的 async/await 是属于比较新的知识,在ES7中被提案在列,然而我们强大的babel粑粑已经对它进行列支持!

    如果开发中使用了babel转码,那么就放心大胆的用吧。

    在vue中使用的例子请到最下面

    1. 何为 async 

    作为新时代的玩意儿,如果对promise不了解,需要先补习一下  Promise 相关的知识。

    async 顾名思义,就是异步的意思, 看上去是一个异步标识,就是告诉我们这个函数中有异步执行的代码。

    像这样 标识:

    async function getData() {
    
        // ......
    
    }

    这就是说getData函数里面有异步的东西,那么异步的东西是什么呢? 其实就是个Promise,

    就算你不写, 直接return 个任何, 它都会封装一下,让你return的东西出现在一个Promise的resolve() ,就是这么刚!

    例子:  这里  getData_1 和 getData_2 当你使用await 执行他们时, 结果是一样的,得到的也是一样的, 都返回一个 Promise对象, 而 getData_1 则是async封装的Promise对象并将 '100' 放到resolve() 的参数中:resolve('100')。

    复制代码
    function getData_1 () {
        return '100'
    }
    
    function getData_2 () {
        return new Promise((resolve, reject) => {
            resolve('100')
        })
    }
    复制代码

    2. 何为 await

    await 就是等待 async执行完,才会执行后面的东西, 等待的东西是异步的,它就会阻塞当前代码, 阻塞??!!

    别担心, 它只能在async函数里使用, 虽然阻塞,但是是异步的。

    来个例子:

    复制代码
    async function getData_1 () {
        return '100'
    }
    
    function getData_2 () {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('200')
            }, 2000)
        })
    }
    
    async  function run () {
    
        const data_1 = await getData_1();
        console.log(data_1);
    
        const data_2 = await getData_2();
        console.log(data_2);
    }
    
    run ();
    复制代码
    getData_1 前面即使不声明async,使用await也是可以的, 因为await 啥都能等!
    1.如果等到的是promise, 它就把promise的resolve的参数返回,
    2.如果等到的是普通东西,就直接返回这个东西。
    就像上面的data_1 , 就算 getData_1 没有async 它的结果也一样的。


    在run函数中, data_1 后的代码需要getData_1 执行完毕才会执行,
    data_1 得出以后, data_2其实会2秒之后才会得出, 但是此时,它会等2秒,
    直到data_2得出以后,才会执行后面的console

    在vue中的例子:

    复制代码
    export default {
        
        mounted () {
            this.run();
            console.log('step2')
        },
        methods: {
            queryData_1() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('queryData_1')
                    }, 2000)
                })
            },
            queryData_2() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('queryData_2')
                    }, 2000)
                })
            },
            queryData_3() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('queryData_3')
                    }, 2000)
                })
            },
            async run () {
                const data_1 = await this.queryData_1();
                console.log(data_1) // 2秒后打印 data_1
                const data_2 = await this.queryData_2();
                console.log(data_2) // 4秒后打印 data_2
                const data_3 = await this.queryData_3();
                console.log(data_3) // 6秒后打印 data_3
            }
        }
    }
    复制代码
  • 相关阅读:
    linux常用命令总结-updating
    三次握手、四次挥手的理解
    【WPF学习】第二十八章 程序集资源
    【WPF学习】第二十七章 Application类的任务
    【WPF学习】第二十六章 Application类——应用程序的生命周期
    【WPF学习】第二十五章 日期控件
    【WPF学习】第二十四章 基于范围的控件
    【WPF学习】第二十三章 列表控件
    【WPF学习】第二十二章 文本控件
    【WPF学习】第二十一章 特殊容器
  • 原文地址:https://www.cnblogs.com/sweeeper/p/11214432.html
Copyright © 2020-2023  润新知