JavaScript中的异步操作

好久不更文了，说明什么(呲牙笑)？？？说明我正躲在草丛里憋大招，哈哈，开玩笑，说明我最近真的很忙(落寞脸)。。今天主要说js中的异步操作。

ES6诞生以前，异步编程的方法，大概有下面四种
1、回调函数
2、事件监听
3、发布/订阅
4、Promise对象
5、es6中出现了Generator函数
6、es7中出现了async/await
今天主要简单介绍6种异步操作的使用。

所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。

回调函数

回调是异步编程中最基础的方法

    var func1=function(callback){        console.log(1); 
         callback();
    }    var func2=function(){        console.log(2);
    }
    func1(func2);

回调函数中最常见的形式就是ajax

事件监听

js中可以通过DOM绑定事件，实现异步事件监听

        var elem = document.querySelector('#div');        var event = document.createEvent('Event');           // 定义事件名称myEvent
        event.initEvent('myEvent', true, true);           // 监听myEvent
        elem.addEventListener('myEvent', function (e) {            console.log('触发事件');            console.log(e);
        }, false);           // 使用目标对象去派发事件，可以是元素节点/事件对象
        elem.dispatchEvent(event);

发布订阅

发布—订阅模式又叫观察者模式，它定义对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知

        var Observer = (() => {            // 为防止消息队列暴露而被篡改故将消息容器作为静态私有变量保存
            var _message = {};            return {                // 注册信息接口
                regist:function(type,fn){                    // 如果此消息不存在则应该创建一个该消息类型
                    if(typeof _message[type] === 'undefined'){                        // 将动作推入到该消息对应的动作执行队列中
                        _message[type] = [fn];                        // 如果此消息存在
                    }else{                        // 将动作方法推入该消息嘴硬的动作执行序列中
                        _message[type].push(fn)
                    }
                },                // 发布信息接口
                fire:function(type,args){                    // 如果该消息没有被注册，则返回
                    if(!_message[type]){                        return
                    }                    // 定义消息信息
                    var events = {                        type:type,  // 消息类型
                        args:args || {}  // 消息携带数据
                    },
                    i = 0; // 消息动作循环变量
                    len = _message[type].length // 消息动作长度
                    // 遍历消息东旭哦
                    for(; i <len; i++){                        // 依次执行注册的消息对应的动作序列
                        _message[type][i].call(this,events);
                    }
                },                // 移除信息接口
                remove:function(type,fn){                    // 如果消息动作队列存在
                    if(_message[type] instanceof Array){                        // 从最后一个消息动作遍历
                        var i = _message[type].length -1;                        for(; i >= 0; i--){                            // 如果存在该动作则在消息动作序列中移除相应动作
                            _message[type][i] === fn && _message[type].splice(i,1);
                        }
                    }
                }
            }
        })()
        Observer.regist('test',function(e){            console.log(e.type,e.args.msg);
        })
        Observer.fire('test',{msg:'传递参数'});

Promise

所谓 Promise，就是一个对象，用来传递异步操作的消息
对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

var promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){
 resolve(value);
 } else {
        reject(error);
 }
});
        promise.then(function(value){            console.log(value)
        }).then(function(value){            console.log('1')
        }).then(function(value){            console.log('2')
        }).catch(function(e){            console.log(e)
        })

常用方法：
1、Promise.all()方法接受一个数组作为参数，用于将多个promise实例，包装成一个新的Promise实例
2、Promise.race()同样是将多个Promise实例，包装成一个新的Promise实例，与Promise.all（）不同的是，Promise.race([p1,p2,p3])只要有一个实例状态为resolved，那么Promise.race()的方法就会被触发。
3、Promise.resolve() 将现有对象转为promise对象,比如，bjquery的ajax返回的是deferred对象，通过promise的resolve()方法将其转换为promise对象。var jsPromise = Promise.resolve($.ajax('/whatever.json'));
4、Promise.reject()返回一个新的promise实例，状态为reject

Generator函数

function* gen(x){  var y = yield x + 2; return y;
}var g = gen(1);
g.next() // { value: 3, done: false } g.next() // { value: undefined, done: true }

调用generator函数返回的是内部的指针对象，调用next方法就会移动内部指针。Generator函数之所以能被用来处理异步操作，因为它可以暂停执行和恢复执行、函数体内外的数据交换和错误处理机制。
所以使用起来我们常常需要额外需要写一个自动执行generator函数的执行器函数，例如：

var fs = require('fs');var readFile = function (fileName){  return new Promise(function (resolve, reject){
          fs.readFile(fileName, function(error, data){             if (error) return 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());
};// 自动执行器function run(gen){ 
  var g = gen();  function next(data){  var result = g.next(data);  if (result.done) return result.value; 
    result.value.then(function(data){
      next(data);
   });
  }
  next();
 }
run(gen);

这么操作的话无疑给我们添加了很多麻烦，所以es7给我提供了async/await，用来规避generator的一些不便之处。

async/await

async函数基于Generator又做了几点改进：
1、内置执行器，将Generator函数和自动执行器进一步包装。
2、语义更清楚，async表示函数中有异步操作，await表示等待着紧跟在后边的表达式的结果。
3、适用性更广泛，await后面可以跟promise对象和原始类型的值(Generator中不支持)

它基于Promise使用async/await来优化then链的调用,其实也是Generator函数的语法糖。 async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来

await得到的就是返回值，其内部已经执行promise中resolve方法，然后将结果返回。使用async/await的方式重写前面的回调任务：

        async function asyncAwaitFn(str) {            return await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(str)
                }, 1000);
            })
        }        const serialFn = async () => { //串行执行
            console.time('serialFn')            console.log(await asyncAwaitFn('string 1'));            console.log(await asyncAwaitFn('string 2'));            console.timeEnd('serialFn')
        }
        serialFn();

整理不易，一步一个坑，且行且珍惜。

作者：范小饭_
链接：https://www.jianshu.com/p/d49697a630c5