优雅异步编程方式

张炳

发布于 2020-05-11 10:54:25

4310

发布于 2020-05-11 10:54:25

并发

同一时间处理多件事情的能力，滚动屏幕，动态请求内容，然后进行渲染

var count = 0,ary = [],total = 30;
for(var i = 0;i < total;i++)
{
    (function(index)
    {
        ajax.(url,function(result)
        {
            ary[index] = result;
            count++;
            if(count == total)
            {
                paint();
            }
        })
    })(i)
}

对于并发处理的多个任务，如果任务与任务之间没有联系，那么这些任务是可以并行执行的，如果任务与任务之间有依赖，那么这些任务就需要串行执行了，因此对于并发的任务处理可以总结为两种情况，一种是并行的任务处理，另一种是串行的任务处理。

并发模型

多线程与锁 ——JAVA
CSP（顺序进程通信）——Erlang、Golang
事件循环——Javascript

为什么Javascript不选择多线程？

简单，不涉及共享数据与锁的处理（最大的共享数据就是DOM，试想下如果多个线程共同操作DOM的可怕后果）
浏览器的环境并没有很强的并行需求

事件循环

while(1)
{
    var event = EventQueue.shift();
    event.handler();
}

为什么要使用异步？ Javascript引擎的并发模型是单线程的事件循环模型，如果对于耗时长的操作使用同步，会使单线程的事件循环模型性能大大降低。

如何获取异步的结果？ 为了能获取异步操作的结果，程序使用callback的方式，当操作完成后，往事件队列push一个事件，当事件循环处理这个事件时，发起异步操作时传入的callback就会被调用。

Callback的问题

代码结构不清晰
函数复用性差

如何优雅的处理异步

Thunk

<!DOCTYPE HTML>
<html lang="zh">
<head>
</head>
<body>
<script src="./thunk.js"></script>
<script>
function get(url,callback)
{
    setTimeout(function()
    {
        callback([1,2,3])
    },500)
}


var thunk = thunks();

var t = thunk(1);
thunk(function(callback)
{
    //return 1
    callback(null,1)
})(function(e,v)
{
    console.log(e);
    console.log(v);
    return thunk(function(callback)
    {
        setTimeout(function()
        {
            callback(null,3)
        },1000)
    })
})(function(e,v)
{
console.log(e);
console.log(v)
})
/*
var getThunk = thunk.thunkify(get,'url');
getThunk(function(data)
{
    console.log(data)
})
*/
</script>
</body>
</html>

Promise

<!DOCTYPE HTML>
<html lang="zh">
<head>
</head>
<body>
<script>
function get(url)
{
    return new Promise(function(resolve,reject)
    {
        setTimeout(function()
        {
            resolve([1,2,3])
        },500)
    })
}

function handle(p)
{
    return new Promise(function(resolve,reject)
    {
        p.then(function(data)
        {
            for(var i = 0,len =data.length;i < len;i++)
            {
                data[i]++;
            }
            resolve(data);
        })
    })
}

var p = get('url');
p = handle(p);
p.then(function(data)
{
    console.log(data);
})
</script>
</body>
</html>

RxJS

<!DOCTYPE HTML>
<html lang="zh">
<head>
</head>
<body>
<button id="a" page="1"></button>
<script src="./rx.js"></script>
<script>
//Example 1
/*var comments = [
    {contentid : '1',content : 'afasfsadf',uin : '1'},
    {contentid : '1',content : 'afasfsadf',uin : '2'},
    {contentid : '1',content : 'afasfsadf',uin : '3'},
    {contentid : '1',content : 'afasfsadf',uin : '4'},
    {contentid : '1',content : 'afasfsadf',uin : '4'}
]
function getComment(page,pagesize)
{
    return new Promise(function(res,rej)
    {
        setTimeout(function()
        {
            res(comments)
        },500)
    });
}
function getNick(uin)
{
    return new Promise(function(res,rej)
    {
        res('w');
    })
}
function getLevel(uin)
{
    return new Promise(function(res,rej)
    {
        res(10);
    })
}
var clicks = Rx.Observable.fromEvent(document.getElementById('a'),'click')
.pluck('target','attributes','page','value')
.flatMap(function(data)
{
    return getComment(data,10)
})
.flatMap(function(data)
{
    var ary = [];
    for(var i = 0;i < data.length;i++)
    {
        (function(index)
        {
            ary[index] = new Promise(function(res,rej)
            {
            
                Promise.all([getNick(data[index].uin),getLevel(data[index].uin)]).then(function(nickandlevel)
                {
                    data[index].nick = nickandlevel[0];
                    data[index].level = nickandlevel[1];
                    res(data[index]);
                })
            })
        })(i)    
    }
    return  Promise.all(ary);
})
clicks.subscribe(function(data)
{
    console.log(data)
})*/

//Example 2
/*var ob1 = Rx.Observable.create(function(observer)
{
    observer.onNext(1);
})

var ob2 = Rx.Observable.create(function(observer)
{
    observer.onNext(2);
})

Rx.Observable.merge(ob1,ob2).bufferWithCount(2).subscribe(function(data)
{
    console.log(data);
})*/
</script>
</body>
</html>

generator

<!DOCTYPE HTML>
<html lang="zh">
<head>
</head>
<body>
<script src="./co.js"></script>
<script>
//Example 1
/*
function sleep(t)
{
    return function(callback)
    {
        setTimeout(function()
        {
            callback()
        },t)
    }
}

function get(url)
{
    return function(callback)
    {
        setTimeout(function()
        {
            callback([1,2,3])
        },500)
    }
}

co(function *()
{
    yield sleep(2000);
    var data = yield get('url');
    console.log(data);
})*/

//Example 2
/*
var script = "onmessage = function(e) { postMessage('msg from worker'); }";
function CoWorker(script)
{
    return function(callback)
    {
        var blob = new Blob([script]);

        var blobURL = window.URL.createObjectURL(blob);

        var worker = new Worker(blobURL);
        worker.onmessage = function(e)
        {
            callback(e.data);
        };
        worker.postMessage(''); 
    }    
}

co(function *()
{
    var data = yield CoWorker(script)
    console.log(data)
})*/

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

//co.js
function co(generator) {

    var gen = generator();
    function next(result) {
        
        var step = gen.next(result);
        if (!step.done) {
            step.value(next);
        } 
    }
    next();
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法