ES6中的promise、async、await用法详解


<!DOCTYPE html>
<html>
<head>
    <title>Promise、async、await</title>
</head>
<body>
<script type="text/javascript">

//promise用法(返回异步方法返回的数据,resolve获取数据成功后调用的方法, reject获取数据失败后调用的方法)

//第一种写法
    var p = new Promise((resolve,reject) => {
        //模拟ajax请求异步获取数据
        setTimeout(() => {
            let name = 'lindont';
            resolve(name); //成功调用的函数
            //reject('error'); //失败调用的函数
        },1000);
    });

    p.then((data) => {
        console.log(data);
    });


//第二种写法
    var getData = (resolve,reject) => {
        setTimeout(() => {
            let name = 'HuangHaoXin';
            resolve(name);
        },1000);
    }

    var p2 = new Promise(getData);

    p2.then((data) => {
        console.log(data);
    });


//async 和 await (async可以将一个同步的方法改为异步方法, await具有阻塞功能变相把一个异步方法变成同步方法, await必须用在async方法中)

//第一种写法
    var getData2 = async () => {
        console.log(2);
        return 'async data'
    }

    var test = async () => {
        console.log(1);
        var d = await getData2();
        console.log(d);
        console.log(3);
    }

    test(); //结果按顺序输出 1 2 3,说明await等待getData2方法执行完毕再往下执行(即自定义一个异步方法,使用await等待另一个异步方法执行完毕,此时异步方法变相成为了同步)


//第二种写法
    var getData3 = () => {
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                var username = 'good day';
                resolve(username);
            },1000);
        });
    }

    var test2 = async () => {
        var data = await getData3();
        console.log(data);
    }

    test2();


</script>
</body>
</html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM