js 异步编程方案

异步函数fun1、异步函数fun2

需求如下：

需求1、fun1执行成功后执行fun2

需求2、同时执行fun1和fun2，fun1和fun2都执行成功后打印"all success"，否则打印出失败原因

需求3、同时执行fun1和fun2，无论fun1和fun2执行成功或者失败都打印'finish'

需求4、同时执行fun1和fun2， 执行快的函数

callback

需求1
会导致回调地狱。

promise

• 规范：ES6 standard

• 链式调用

• babel配置

fun1(){
    return new Promise(resolve,reject){
        try{
          console.log("execute fun1")
          resolve('fun1');
        }catch(){
          reject('fun1 fail');
        }
    }
}
fun2(){
    return new Promise(resolve,reject){
        try{
          console.log("execute fun2")
          resolve('fun2');
        }catch(){
          reject('fun2 fail');
        }
    }
}
//需求1
fun1().then(()={
    fun2();
});
//需求2
Promise.all([fun1(),fun2()]).then(()=>{
    console.log('all success');
}).catch((err)=>{
    console.log(err)
});
//需求3 不确定哦
Promise.all([fun1(),fun2()]).finally(()=>{
    console.log('finish');
})
//需求3 
Promise.race([fun1(),fun2()]).then((data)=>{
    console.log(`faster is ${data}`);
})

generator + co

• 生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议

• *定义生成器函数，yield 定义暂停点

中序遍历代码

function* traverseTree(node) {
    if (node == null) return;
    yield* traverseTree(node.left);
    yield node.value;
    yield* traverseTree(node.right);
}

• ES6

fun1(){
    return new Promise(){
        
    }
}

 co(function *(){
   // yield any promise
   var result = yield Promise.resolve(true);
 }).catch(onerror);
 
 co(function *(){
   // resolve multiple promises in parallel
   var a = Promise.resolve(1);
   var b = Promise.resolve(2);
   var c = Promise.resolve(3);
   var res = yield [a, b, c];
   console.log(res);
   // => [1, 2, 3]
 }).catch(onerror);
 
 // errors can be try/catched
 co(function *(){
   try {
     yield Promise.reject(new Error('boom'));
   } catch (err) {
     console.error(err.message); // "boom"
  }
 }).catch(onerror);

async + await

在babel中别编译为generator

参考

• 掘金-异步编程方案进化论

• 理解 Iterator, Generator 和 Async/Await