JavaScript异步编程技术比较：Async、Generator、Promise、CPS

淩亂°似流年 2023-07-05 13:26 11阅读 0赞

ES7之后JavaScript提供了多种异步编程的实现方式，接下来通过例子比较一下各种方式在使用上的不同。

我们将通过异步的方式调用下面Sleep函数

// sleep: number -> Promise<number>
    function sleep(ms){
      return new Promise(resolve =>
        setTimeout((()=>resolve(ms)), ms));
    }

## 1. async/await ##

async function main(){
      let a = await sleep(1000);
      alert(`${a}ms passed`); // 1000ms passed
      let b = await sleep(2000);
      alert(`${b}ms passed`); // 2000ms passed
      let [c, d] = await Promise.all([
         sleep(3000),
         sleep(4000)
      ]);
      alert(`${Math.max(c, d)}ms passed`); // 4000ms passed
      alert('done');
    }
    
    main(); // return Promise

async是实现异步调用最简洁的方式，async内部可以通过await使一个异步调用转为同步。想要同步多个异步结果时，可以使用Promise.all配合await实现。

## 2. generator/yield ##

// main: void -> Promise<void>
    let main = async(function* _main(){
      let a = yield sleep(1000);
      alert(`${a}ms passed`);
      let b = yield sleep(2000);
      alert(`${b}ms passed`);
      let [c, d] = yield Promise.all([
         sleep(3000),
         sleep(4000)
      ]);
      alert(`${Math.max(c, d)}ms passed`);
      alert('done');
    });
    
    // async: (void -> Generator) -> (void -> Promise)
    function async(generatorFunc) {
      let generator = generatorFunc();
      let onResolved = arg =>{
        let result = generator.next(arg);
        if (result.done) {
          return result.value;
        } else {
          return result.value.then(onResolved);
        }
      }
      return onResolved;
    }
    
    main(); // return Promise<void>

async函数接受一个generator函数返回Promise。generator函数\_main内部调用的Promise成功后会调用next，进行后需处理，相当于用yield模仿了await的效果。整体上用generator/yield模拟了async/await的效果。

## 3. Promise/then ##

// main: void -> Promise<void>
    function main(){
      return sleep(1000).then((a)=>{
        alert(`${a}ms passed`);
        return sleep(2000).then((b)=>{
          alert(`${b}ms passed`);
          return Promise.all([sleep(3000), sleep(4000)]).then(([c, d])=>{
            alert(`${Math.max(c, d)}ms passed`);
            alert('done');
            return;
          });
        });
      });
    });
    
    main(); // return Promise<void>

使用Promise/then的问题是无法避免回调地狱，所以ES7出现async/await之后，以下这样的代码

function main(){
      return getA().then((a)=>
        getB().then((b)=>
          a + b));
    }

变更多的用下面这样的代码代替

async function main(){
      const a = await getA();
      const b = await getB();
      return a + b;
    }

## 4. CPS ##

首先实现CPS版本的sleep如下：

// sleep: number -> (number -> void) -> void
    function sleep(ms, cb){
      setTimeout((()=> cb(ms)), ms);
      return;
    }

然后实现异步调用如下：

// main: void -> Promise<void>
    function main(){
      sleep(1000, (a)=>{
        alert(`${a}ms passed`);
        sleep(2000, (b)=>{
          alert(`${b}ms passed`);
          let waitAll = genWaitAll(next);
          sleep(3000, waitAll());
          sleep(4000, waitAll());
          function next([c, d]){
            alert(`${Math.max(c, d)}ms passed`);
            alert('done');
            return;
          }
        });
      });
    };
    
    // genWaitAll: ([a] -> void) -> (void -> (a -> void))
    function genWaitAll(next){
      let results = [];
      let counter = 0
      return ()=>{
        let i = counter;
        counter++;
        return (ms)=>{
          results[i] = ms;
          counter--;
          if (counter === 0){
            next(results);
          }
        };
      }
    };
    
    main(); // return void;

CPS本质就是利用回调实现异步编程，所以会出现回调地狱的问题，同时为了实现Promise.all的效果需要手动实现genWaitAll()

## 5. 总结 ##

我们通过例子对比了JS各种异步编程的实现方案，需要说明的是，这些方案诞生的时间与我们的介绍是相反的，一句话总结他们之间的关系：CPS通过回调实现了最朴素的异步编程方案；ES6提出Promise，在CPS的基础上实现了then、Promise.all、Promise.race等功能、使用起来更加方便；generator可以帮助Promise中实现异步编程中的同步；ES7中出现的async/await相当于generator/yield的语法糖，可以更简单地实现异步编程中的同步。