美文网首页
封装嵌套的异步函数,如何取得返回值带例子

封装嵌套的异步函数,如何取得返回值带例子

作者: yujiawei007 | 来源:发表于2017-09-10 15:22 被阅读0次

    1 错误尝试

    <script>
    function getSomething() {
     var r = 0;
     setTimeout(function() {
     r = 2;
     }, 10);
     return r;
    }
     
    function compute() {
     var x = getSomething();
     alert(x * 2);
    }
    compute();
    </script>
    

    2 回调函数

    <script>
    function getSomething(cb) {
     var r = 0;
     setTimeout(function() {
     r = 2;
     cb(r);
     }, 10);
    }
     
    function compute(x) {
     alert(x * 2);
    }
    getSomething(compute);
    </script>
    

    3 promise

    回调函数真是个好东西,然后一直这么写代码写了很久。遇到异步就传函数!!后来我知道有promise这一个东西,专门解决由于回调函数引起的问题,又学会了promise:

    <script>
    function getSomething() {
     var r = 0;
     return new Promise(function(resolve) {
     setTimeout(function() {
      r = 2;
      resolve(r);
     }, 10);
     });
    }
     
    function compute(x) {
     alert(x * 2);
    }
    getSomething().then(compute);
    </script>
    

    promise仍然没有放弃回调,只是回调的位置发生了改变。

    4 generator

    再后来我又学会了generator,知道其有中断函数执行的能力,又做了新的尝试:

    <script>
    function getSomething() {
     var r = 0;
     setTimeout(function() {
     r = 2;
     it.next(r);
     }, 10);
    }
     
    function *compute(it) {
     var x = yield getSomething();
     alert(x * 2);
    }
    var it = compute();
    it.next();
    </script>
    

    同步的写法,能实现异步的逻辑,感觉高大上了很多。

    5 promise + generator

    后来又听说promise加generator,才是异步的完美方式,赶紧用高射炮打蚊子(这个例子,还不足以说出二者在一起用的好处):

    <script>
    function getSomething() {
     var r = 0;
     return new Promise(function(resolve) {
     setTimeout(function() {
      r = 2;
      resolve(r);
     }, 10);
     });
    }
     
    function *compute() {
     var x = yield getSomething();
     alert(x * 2);
    }
    var it = compute();
    it.next().value.then(function(value) {
     it.next(value);
    });
    </script>
    

    6 async

    心想这算是够屌的吧,后来又听说es7给出了终极方案:async。

    <script>
    function getSomething() {
     var r = 0;
     return new Promise(function(resolve) {
     setTimeout(function() {
      r = 2;
      resolve(r);
     }, 10);
     });
    }
     
    async function compute() {
     var x = await getSomething();
     alert(x * 2);
    }
    compute();
    </script>
    

    以上就是JavaScript异步函数返回值的获取方法

    相关文章

      网友评论

          本文标题:封装嵌套的异步函数,如何取得返回值带例子

          本文链接:https://www.haomeiwen.com/subject/kyttsxtx.html