码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-08-05 21:36:37      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:style   col   syn   script   详解   erro   async   htm   获取数据   

<!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>

 

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

标签:style   col   syn   script   详解   erro   async   htm   获取数据   

原文地址:https://www.cnblogs.com/cocboo/p/9426917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!