JavaScript语言的执行环境是‘单线程’的(也就是说，执行后续的代码之前必须完成前面的任务,也就是采用的是阻塞的方式来执行代码)
这个模式的好处是实现起来比较简单，执行环境相对单纯一点吗，缺点就是每一个任务的执行要耗时很长的时间的话，后面的任务必须要进行排队，这个过程会拖慢整个程序的执行。常见的浏览器长时间无响应（假死），往往就是因为一段JavaScript代码长时间运行(比如说发生了死循环),导致页面卡死在了这个地方，其他的任务无法执行。
为了解决我们上面遇到的问题，我们将JavaScript语言将任务执行分为了两种：同步模式和异步模式
同步模式：就是上面所说的线性的执行，等待前面的任务结束，才可以开始后面的任务。
异步模式：就是每一个任务有一个或是多个回调函数，前面的一个任务结束后，并不是执行后面的任务，而是执行回调函数，后面的任务可以不用等待前面的任务结束，就开始执行，总的来说，就是采用了一种非阻塞的方式来实现代码的执行。

JavaScript异步编程的方法

ES6之前： 回调函数、事件监听、Promise对象
ES6：Generator函数(协程coroutine)
ES7： async和await

回调函数

如何实现回调函数的，可以通过定时器来实现，但是回调函数和异步模式并不是完全一致的。
先举一个使用定时器实现异步操作的例子。

f1();
f2();
function f1(callback){
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　callback();
　　}, 1000);
}
// 执行
f1(f2)

上面的例子我们将同步操作编程了异步操作，这个时候f1并不会阻塞程序的运行，相当于先执行程序的主要逻辑，将耗时的操作进行延迟操作。
优点：回调韩式是异步编程最简单，最基础的方法，非常容易部署
缺点：不利于代码的阅读和维护，各个部分的代码是高度的耦合到了一起，流程会很混乱，而且每一个任务只能指定一个回调函数。
我们现在来看一个同步回调的例子

function A(callback){
    console.log("I am A");
    callback();  //调用该函数
}
function B(){
   console.log("I am B");
}
A(B);

那一半在上面情况下我们需要用到异步模式呢？我们往往使用的场景是我们对数据得到的顺序有严格的要求，举个栗子：

//嵌套回调，读一个文件后输出，再读另一个文件，注意文件是有序被输出的，先`text1.txt`后`text2.txt`
var fs = require('fs');

fs.readFile('./text1.txt', 'utf8', function(err, data){
    console.log("text1 file content: " + data);
    fs.readFile('./text2.txt', 'utf8', function(err, data){
        console.log("text2 file content: " + data);
    });
});

在回调函数嵌套的不深的情况下，代码还是比较容易理解和维护的，但是一旦嵌套的层数加深，就会出现‘回调金字塔’的问题。当这里面的每一个回调函数都包含了很多的业务逻辑的话吗，整个代码就会变的十分的复杂，维护这段代码回事十分痛苦是的事情，这就是‘回调地狱’。

doSomethingAsync1(function(){
      doSomethingAsync2(function(){
          doSomethingAsync3(function(){
              doSomethingAsync4(function(){
                  doSomethingAsync5(function(){
                      // code...
                  });
            });
         });
     });
 });

还有一个事情，我们预设一下下面代码的执行情况是什么：

var fs = require('fs');

try{
    fs.readFile('not_exist_file', 'utf8', function(err, data){
        console.log(data);
    });
}
catch(e){
    console.log("error caught: " + e);
}

在上面的代码中，我们尝试分析一下：读取一个不存在的文件，这当然会引发 异常，但是现在的结果是输出的结果是：undefined，因为最外层的try/catch语句是无法捕获这个异常的，出现这个现象的原因是：代码的异步执行导致的
问：我说嘛异步代码回调函数中的异常无法被外层的try/catch语句捕获。
答：异步调用一般被划为为两个阶段，提交请求和处理结果，这两个阶段之间有时间循环的调用，他们属于不同的时间循环，彼此之间是没有关联的，所以try/catch语句只能捕获档次时间循环的异常，对callback无能为力。
一旦我们在异步调用函数中扔出一个异步I/O请求，异步调用函数立即返回，此时，这个异步调用函数和这个异步I/O请求没有任何关系。

事件监听(事件发布/订阅)

采用事件驱动模式，任务的执行不取决于代码的顺序，而是取决于某个事件是否发生。
监听函数：on，bind，listen，addEventListener，observe
我们以一个例子来说明，现在为f1绑定一个事件。

f1.on('done',f2);
//当f1发生done的时间的时候，就执行f2，然后对f1进行改写
function f1(){
  settimeout(function(){
    f1.trigger('done');
  })
}

f1.trigger('done');表示，执行完成之后，立即触发done事件，从而开始执行f2，这样的方法的好处是：比较容易理解，一次可以绑定多个事件，每一个事件都可以指定多个回调函数，而且可以去耦合，有利于实现模块化。
缺点：整个程序变成了事件驱动，运行的流程变得十分的不清楚。
事件监听的方法
（1）onclick方法

element.onclick = function(){
  //处理函数
}

优点：写法兼容了主流的浏览器
缺点：当同一个element元素绑定了多个事件的时候，只有最后一个事件会被添加
（2）attachEvent和addEventListener方法

// IE浏览器使用的事件绑定方法，执行的顺序是1-2-3
element.attachEvent("onclick",handler1);
element.attachEvent("onclick",handler2);
element.attachEvent("onclick",handler3);
//标准addEventListener，执行的顺序是3-2-1
element.addEvenListener("click",handler1,false);
element.addEvenListener("click",handler2,false);
element.addEvenListener("click",handler3,false);

其中第三个参数决定的是执行的顺序，是一个布尔值，当为false的时候表示由里向外，true表示由外向内（了解即可）

发布/订阅

我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern），是一种经典的设计模式。

//发布和订阅事件
let evt = document.createEvent("event"); // 创建自定义事件
 evt.initEvent("click", true, true); // 初始化完毕，即发布
 window.addEventListener("click", function(e){ // 监听事件，即订阅
     console.log(1);
 });

 window.dispatchEvent(evt); //派发事件

这样的设计模式可以应用到我们进行前端验证的时候，有很多的输入项需要进行验证，我们需要在点击确定按钮的时候，对所有的验证项进行一次性的验证。

Promise对象

promise简单的来说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)
promise的特点：
(1)对象的状态不受外界影响，Promise对象代表一个异步操作，有三个状态：pending(进行中)、fulfilled（已成功）和rejected（已失败）,仅仅是异步操作的结果可以影响这三个状态，其他任何的操作都不可以改变这个状态。
(2)一旦状态已经发生了改变，就不会再改变了，任何时候得到的都是这个结果：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
promise的缺点：
（1）无法取消promise，一旦新建就会立即执行，没有办法在中途进行取消
（2）如果不设置回调函数的话，promise内部抛出的错误，不会反映到外部
（3）当处于pending状态的时候，无法得知目前进展到某一个阶段（是刚刚开始还是快要结束）
promise的基本用法
我们在最开始需要创建一个promise实例

const promise = new Promise (function (resolve,reject){
//同步的代码
  if(/*异步操作成功*/){
    resolve(value);
  }else{
    reject(error);
  }
});

Promise 构造函数接受一个函数作为参数，函数中有两个参数分别是resolve和reject。他们是两个函数，有JavaScript引擎提供，不需要自己进行部署。
resolve：将Promise对象从“未完成”转变成“成功”，在异步操作成功的时候调用，将异步操作的结果，作为参数传递出去。
reject:将Promise对象的状态从“未完成”变为“失败”，在异步操作失败的时候进行调用，并将报的错误作为参数传递出去.

promise.then(function(value) {
  // success
}, function(error) {
  // failure,可选，可以不写
});

Promise.prototype.then()
then方法是定义在原型对象Promise.prototype上的，作用就是为Promise实例添加状态改变时的回调函数。
then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回是一个新的Promise实例(不是原来的那个Promise实例)，这也是我们调用链式方法的根本依旧。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。这个和下面的代码是不一样的。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function funcA(comments) {
  console.log("resolved: ", comments);
}, function funcB(err){
  console.log("rejected: ", err);
});

第一个then和上面的代码用法完全相同，不再详细描述，但是第二个then中传入了两个参数，会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用funcA，如果状态变为rejected，就调用funcB。
Promise.prototype.catch()
Promise.prototype.catch方法等价于.then(null,reject)的别名，用于指定发生错误的时候的回调函数。主要针对处理前一个回调函数运行时发生的错误。

  .catch((err) => console.log('rejected', err));

// 等同于,then没有指定从从“未完成”到“完成”状态的处理函数
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

也可以对指定的promise抛出的错误进行处理

const promise = new Promise(function(resolve, reject) {
  throw new Error('test');
});
//promise抛出了一个错误，被catch指定的回调函数捕获了
promise.catch(function(error) {
  console.log(error);
});

//如果 Promise 状态已经变成resolved，再抛出错误是无效的。
const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

对于promise来说，对错误的出来，是采用“冒泡机制”的，就是一旦promise一旦出现了错误，错误会一直向后面进行传递，直到被捕获到为止。举一个例子：

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。也就是在Promise中出现错误的时候，不会终止程序，而是外部的代码继续执行。在报错后2s还是会打出123，通俗的说就是Promise会吃到错误。catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123

Promise.prototype.finally()

finally方法用于指定不管 Promise对象最后状态如何，都会执行的操作。finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的Promise 状态到底是fulfilled还是rejected。

promise.finally(() => {
  // 语句
});

// 等同于
promise
.then(
  result => {
    // 语句
    return result;
  },
  error => {
    // 语句
    throw error;
  }

Promise.all()

Promise.all方法用于将多个Promise 实例，包装成一个新的 Promise 实例。Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise实例,p的状态由P1，P2，P3决定。
（1）当P1，P2，P3状态都变成fulfilled，p的状态才会转换成fulfilled，此时P1，P2，P3的返回值组成一个数组返回给p。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

var fs = require('fs')

var read = function (filename){
    var promise = new Promise(function(resolve, reject){
        fs.readFile(filename, 'utf8', function(err, data){
            if (err){
                reject(err);
            }
            resolve(data);
        })
    });
    return promise;
}

var promises = [1, 2].map(function(fileno){
    return read('./text' + fileno + '.txt');
});

Promise.all(promises)
.then(function(contents){
    console.log(contents);
})
.catch(function(err){
    console.log("error caught: " + err);
})

上述代码会并发执行读取text1.txt和text2.txt的操作，当两个文件都读取完毕时，输出它们的内容，contents是一个数组，每个元素对应promise数组的执行结果 (顺序完全一致)，在这里就是text1.txt和text2.txt的内容。

Promise.race()

Promise.race方法同样是将多个 Promise实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise实例的返回值，就传递给p的回调函数。如果指定时间内没有获得结果，就将 Promise 的状态变为reject，否则变为resolve。

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

上面代码中，如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.resolve方法的参数分成四种情况。
(1)参数是一个Promise实例
如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
(2)参数是一个thenable对象
thenable对象指的是具有then方法的对象,比如说下面的对象：

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
(3)参数不是具有then方法的对象，或根本就不是对象
如果参数是一个原始值，或是一个不具有then方法的对象，则Promise.reslove方法返回一个新的Promise对象，状态为resolved
(4)不带有任何参数
Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的Promise 对象。

const p = Promise.resolve();

p.then(function () {
  // ...
});

Promise.reject()

Promise.reject(reason)方法也会返回一个新的Promise实例，该实例的状态为rejected。

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

上面代码生成一个 Promise对象的实例p，状态为rejected，回调函数会立即执行。
Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

Promise.try()

在实际开发的过程中，不知道或是不想区分，函数f是同步函数还是异步操作，但是想用Promise来处理它，因为这样就可以不管f是否包含异步操作，都用then方法指定下一步的流程，用catch方法处理f抛出的错误，一般就会采取下面的写法。

Promise.resolve().then(f)

上面的写法有一个缺点，就是如果f是同步函数，那么它会在本轮事件循环的末尾执行。

const f = () => console.log('now');
Promise.resolve().then(f);
console.log('next');
// next
// now

Generator函数

Generator函数特征
（1）function关键字与函数名之间有一个星号
（2）函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return语句。必须调用便利对象的next方法，让指针移向下一个状态，也就是说每一次调用next方法，内部指针就从函数头部或是上一次停下来的地方开始执行，知道遇到下一个yield表达式(或是return语句)为止，Generator函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
Generator函数的暂停执行的效果，意味着可以把异步操作写在yield语句里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了。所以，Generator函数的一个重要实际意义就是用来处理异步操作，改写回调函数。

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

其中return和yield的区别：
(1)return终结遍历，之后的yield语句都失效；next返回本次yield语句的返回值。
(2)return没有参数的时候，返回{ value: undefined, done: true }；next没有参数的时候返回本次yield语句的返回值。
(3)return有参数的时候，覆盖本次yield语句的返回值，也就是说，返回{ value: 参数, done: true }；next有参数的时候，覆盖上次yield语句的返回值，返回值可能跟参数有关（参数参与计算的话），也可能跟参数无关（参数不参与计算）。

function *foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var it = foo( 5 );

// 注意这里在调用next()方法时没有传入任何值
console.log( it.next() );       // { value:6, done:false }
console.log( it.next( 12 ) );   // { value:8, done:false }
console.log( it.next( 13 ) );   // { value:42, done:true }

你可以看到我们在构造generator函数遍历器的时候仍然可以传递参数，这和普通的函数调用一样，通过语句foo(5)，我们将参数x的值设置为5。

第一次调用next()方法时，没有传入任何值。为什么呢？因为此时没有yield表达式来接收我们传入的值。

如果在第一次调用next()方法时传入一个值，也不会有任何影响，该值会被抛弃掉。按照ES6标准的规定，此时generator函数会直接忽略掉该值（注意：在撰写本文时，Chrome和FireFox浏览器都能很好地符合该规定，但其它浏览器可能并不完全符合，而且可能会抛出异常）。

表达式yield(x + 1)的返回值是6，然后第二个next(12)将12作为参数传入，用来代替表达式yield(x + 1)，因此变量y的值就是12 × 2,即24。随后的yield(y / 3)（即yield(24 / 3)）返回值8。然后第三个next(13)将13作为参数传入，用来代替表达式yield(y / 3)，所以变量z的值是13。

最后，语句return (x + y + z)即return (5 + 24 + 13)，所以最终的返回值是42。

async/await

async
async/await虽然是ES7的关键字，但是通过编译器的解译，也是可以正常使用。async/await的语法很简洁，直接作为一个关键字放到函数前面，用于表示该函数是一个异步函数。

async function timeout() {
    return 'hello world'
}
timeout();
//console.log(timeout())
console.log('虽然在后面，但是我先执行');

分析：可以看出其实async 函数返回的是一个promise对象。所以，async内部执行的逻辑机理与promise是一致的。
await
await的语法是将其放在async函数中，表示暂停的意思。可以将异步代码像同步代码一般书写了。

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}
async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}