Generator 异步操作的同步化写法

最新推荐文章于 2022-03-09 15:01:36 发布

徐同保

最新推荐文章于 2022-03-09 15:01:36 发布

阅读量586

点赞数 1

分类专栏： web前端前端技术分享文章标签： javascript Generator

本文链接：https://blog.csdn.net/xutongbao/article/details/78216218

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Generator 异步操作的同步化写法</title>
</head>
<body>
<script>
    function getData(resolve){
        setTimeout(()=>{
            var data = {
                id: '001'
            };
        resolve(data);
    }, 2000);
    }

    function getData2(data){
        setTimeout(()=>{
            console.log('Promise:' + data.id);
    }, 3000)
    }
    var promise = new Promise(getData);
    promise.then(getData2);

    //Generator函数的暂停执行的效果，意味着可以把异步操作写在yield语句里面，等到调用next
    // 方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放
    // 在yield语句下面，反正要等到调用next方法时再执行。所以，Generator函数的一个重要实
    // 际意义就是用来处理异步操作，改写回调函数。
    //Promise的写法的缺点就是各种promise实例对象跟一连串的then，代码量大、行数多，满眼
    // 的promise、then、resolve看得头晕，而且每一个then都是一个独立的作用域，传递参数痛苦。
    function request(myData) {
        setTimeout(()=>{
            var data = {
                id: myData
            };
            it.next(data);
        }, 1000);
    }

    function* ajaxs() {
       var data = yield request('001');
        var data2 = yield request(data.id);
        var data3 = yield request(data2.id);
        console.log('Generator:' + data3.id);
    }
    var it = ajaxs();
    it.next();

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