Js 异步编程

参考文章

http://www.ruanyifeng.com/blog/2015/05/async.html

http://www.ruanyifeng.com/blog/2015/04/generator.html

https://www.jianshu.com/p/ffa5cbe9ab29

https://segmentfault.com/a/1190000017224799

异步

简单的说将任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回头执行第二段，这种不连续的执行即异步

以前异步编程的方法

回调函数
事件监听
发布/订阅
Promise对象

回调函数（callback)

把任务的第二段单独写在一个函数里，等到宠幸执行这个任务的时候，就直接调用这个函数

缺点：若回调函数嵌套太多，无法管理

var callback = function(err,data) {
    if(err) throw err;
    console.log(data);
}
fs.readFile('/etc/passwd', callback)
# 读取文件进行处理，其中readFile中的第二个参数就是回调函数，等操作系统返回/etc/passwd这个文件后，回调才执行

Promise

Promise 提供then方法加载回调函数，catch方法捕捉执行过程中抛出的错误，解决Callback 的缺点

缺点：代码冗余

var readFile=require('fs-readfile-promise') # 使用一个第三方模块，作用是返回一个Promise版本的readFile函数
readFile(fileA)
.then(function(data){
    console.log(data.toString());
})
.then(function(data){
    return readFile(fileB);
})
.then(function(data){
    console.log(data.toString());
})
.catch(function(err){
    console.log(err)
})

协程

yield 命令表示执行到此处，执行权交给其他协程。也就是说，yield命令是异步两个阶段的分界线

协程遇到yield命令就暂停。等到执行权返回，再从暂停的地方继续往后执行

优点：代码写法非常像同步操作，除去yield命令

协程类似函数，又有点像线程，运行流程如下

协程A开始执行
A执行到一半，进入暂停，执行权转移到协程B
3.一段时间后协程B还给执行权给A

协程A回复执行
其中协程A就是异步任务，分成多段执行

 function asyncJob() {
     // ...其他代码
     var f = yield readFile(fileA);
     // ... 其他代码
 }

Generator函数

Generator 函数是协程在ES6的实现，最大特点是可以交出函数执行权（暂停执行）

Generator 函数返回一个内部指针而不会返回结果。调用指针的next方法会移动内部指针，即执行异步任务的第一段，指向第一个遇到yield语句

每次调用next方法，会返回一个对象，表示当前阶段的信息（value和done属相），value 即yield语句后面表达式的值目标是当前阶段的值;done属性是个布尔值，表示Generator函数是否执行完毕

    var y
    var z
    function* gen(x) {
        y = yield x+2;
        z = yield y*10;
        return z
    }
    
    var g1 = gen(1);    ## 初始化函数，返回一个内部指针g
    g1.next(2)          ## {value: 3, done: false}, 此时y,z is undefined
    g1.next(3)          ## {value: 30, done: false}, 此时y=3,z is undefined 
    g1.next(4)          ## {value: 4,done: true}, 此时y=3,z=4
    
    var g2=gen(1);
    g2.next();          ## {value: 3, done: false}, 此时y,z is undefined
    g2.next(10);        ## {value: 100, done: false}, 此时y=10, z is undefined
    g2.next(4);         ## {value: 4, done: true}, 此时y=10, z=4

async函数

async 函数就是Generator 函数的语法糖

相对于Generator函数的改进
- 内置执行器：async函数的执行与普通函数一样: var result=asyncReadFile()
- 更好的语义
- 更广的适用性

    var fs = require('fs');

    var readFile = function (fileName){
      return new Promise(function (resolve, reject){
        fs.readFile(fileName, function(error, data){
          if (error) reject(error);
          resolve(data);
        });
      });
    };

    var gen = function* (){
      var f1 = yield readFile('/etc/fstab');
      var f2 = yield readFile('/etc/shells');
      console.log(f1.toString());
      console.log(f2.toString());
    };

替换成aynsc语法：

    var asyncReadFile = async function() {
        var f1 = await readFile('/etc/fstab');
        var f2 = await readFile('/etc/shells');
        console.log(f1.toString());
        console.log(f2.toString());
    }

async函数用法

同Generator函数一样，async函数返回一个Promise对象，可以使用then方法添加回调。当函数执行的时候，遇到await 就会先返回，等到触发的异步操作完成，再执行函数体内的语句。
https://www.jianshu.com/p/ffa5cbe9ab29

基本套路：
Step1：用Promise对象包装异步过程，和Promise使用一样，只是参数个数随意，没有限制

function sleep(ms) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('sleep for ' + ms + ' ms');
        }, ms);
    });
}

Step2: 定义异步流程

async function asyncFunction () {
    console.log('asyncFunction total executing:');
    const sleep1 = await sleep(2000);
    console.log('sleep1: ' + sleep1);
    const [sleep2, sleep3, sleep4]= await Promise.all([sleep(2000), sleep(1000), sleep(1500)]);
    console.log('sleep2: ' + sleep2);
    console.log('sleep3: ' + sleep3);
    console.log('sleep4: ' + sleep4);
    const sleepRace = await Promise.race([sleep(3000), sleep(1000), sleep(1000)]);
    console.log('sleep race: ' + sleepRace);
    console.log('asyncFunction total executing:');
    
    return 'asyncFunction done.'  // 这个可以不返回，这里只是做个标记，为了显示流程
}

Srep3: 像普通函数调用async函数，在then函数中获取整个流程的返回信息，在catch函数中统一处理错误信息

asyncFunction().then(data => {
    console.log(data); // asyncFunction return 的内容在这里获取
}).catch(error => {
    console.log(error); // asyncFunction 的错误统一在这里抓取
})
console.log('after asyncFunction code executing....')

输出log

after asyncFunction code executing....
sleep1: sleep for 2000 ms
sleep2: sleep for 2000 ms
sleep3: sleep for 1000 ms
sleep4: sleep for 1500 ms
sleep race: sleep for 1000 ms
asyncFunction total executing:: 5006.276123046875ms
asyncFunction done.

日志分析：

after asyncFunction code executing....代码位置在async函数asyncFunction()调用之后，反而先输出。这说明async函数asyncFunction()调用之后会马上返回，不会阻塞主线程。
sleep1: sleep for 2000 ms这是第一个await之后的第一个异步过程，最先执行，也最先完成，说明后面的代码，不论是同步和异步，都在等他执行完毕。
sleep2 ~ sleep4这是第二个await之后的Promise.all()异步过程。这是“比慢模式”，三个sleep都完成后，再运行下面的代码，耗时最长的是2000ms；
sleep race: sleep for 1000ms这是第三个await之后的Promise.race()异步过程。这是“比快模式”，耗时最短sleep都完成后，就运行下面的代码。耗时最短的是1000ms；
asyncFunction total executing::5006.276123046875ms这是最后的统计总共运行时间代码。三个await之后的异步过程之和
```
 2000（独立的） + 2000（Promise.all） + 1000（Promise.race） = 5000ms
```

这个和统计出来的5006.276123046875ms非常接近。说明上面的异步过程，和同步代码执行过程一致，协程真的是在等待异步过程执行完毕。

asyncFunction done.这个是async函数返回的信息，在执行时的then函数中获得，说明整个流程完毕之后参数传递的过程。

宏任务、微任务执行顺序

     async function async1() {
        console.log( 'async1 start' )
        await async2()
        console.log( 'async1 end' )
    }
    
    async function async2() {
        console.log( 'async2' )
    }
    
    console.log( 'script start' )
    
    setTimeout( function () {
        console.log( 'setTimeout' )
    }, 0 )
    
    async1();
    
    new Promise( function ( resolve ) {
        console.log( 'promise1' )
        resolve();
    } ).then( function () {
        console.log( 'promise2' )
    } )
    
    console.log( 'script end' )

直接打印同步代码：script start
setTimeout 放入了宏任务队列2
调用async1,打印同步代码：async1 start
分析 await。先计算出右侧结果，然后看到awailt 后中断async函数

先得到右侧结果的表达式，执行async2，打印同步代码：async2，并且return Promise.resolve(undefined)
await 后，中断async函数，先执行async外的同步代码
5.执行new Promise（），Promise构造好书是直接调用的同步代码，打印：promise1

promise.then(),是微任务，暂时不打印，推入当前宏任务的微任务队列中
打印同步代码：script end
async外部执行完毕async1 end
undefined
setTimeout