由于javascript是单线程的，只能在JS引擎的主线程上运行的，所以js代码只能一行一行的执行，不能在同一时间执行多个js代码任务，这就导致如果有一段耗时较长的计算，或者是一个ajax请求等IO操作，如果没有异步的存在，就会出现用户长时间等待，并且由于当前任务还未完成，所以这时候所有的其他操作都会无响应。
js最开始只是为了处理一些表单验证和DOM操作而被创造出来的，所以主要为了语言的轻量和简单采用了单线程的模式。多线程模型相比单线程要复杂很多，比如多线程需要处理线程间资源的共享问题，还要解决状态同步等问题。
JavaScript的事件执行机制：
当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。对于同步任务来说，会被推到执行栈按顺序去执行这些任务。对于异步任务来说，当其可以被执行时，会被放到一个 异步任务队列（task queue） 里等待JS引擎去执行。当执行栈中的所有同步任务完成后，JS引擎才会去异步任务队列里查看是否有任务存在，并将找到的任务放到执行栈中去执行，执行完了又会去异步任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。异步任务队列也被分为 微任务（microtask）队列 & 宏任务（macrotask）队列。
Event Loop的完整执行顺序是：
首先执行执行栈里的任务。
执行栈清空后，检查微任务（microtask）队列，将可执行的微任务全部执行。
取宏任务（macrotask）队列中的第一项执行。
回到第二步。
注意： 微任务队列每次全执行，宏任务队列每次只取一项执行。
setTimeout(() => { console.log('我是第一个宏任务'); Promise.resolve().then(() => { console.log('我是第一个宏任务里的第一个微任务'); }); Promise.resolve().then(() => { console.log('我是第一个宏任务里的第二个微任务'); }); }, 0); setTimeout(() => { console.log('我是第二个宏任务'); }, 0); Promise.resolve().then(() => { console.log('我是第一个微任务'); }); console.log('执行同步任务');
最后的执行结果是：
// 执行同步任务 // 我是第一个微任务 // 我是第一个宏任务 // 我是第一个宏任务里的第一个微任务 // 我是第一个宏任务里的第二个微任务 // 我是第二个宏任务
常见的异步模式：回调函数；事件监听；发布/订阅模式（又称观察者模式）；promise；Generator函数；ES7中async/await。
回调函数：回调函数是异步操作最基本的方法，比如有一个异步操作(asyncFn)，和一个同步操作(normalFn)。如果按照正常的JS处理机制来说，同步操作一定发生在异步之前。如下：
function asyncFn() { setTimeout(() => { console.log('asyncFn'); }, 0) } function normalFn() { console.log('normalFn'); } asyncFn(); normalFn(); // normalFn // asyncFn
如果我想要将顺序改变，可以使用回调的方式处理：
function asyncFn(callback) { setTimeout(() => { console.log('asyncFn'); callback(); }, 0) } function normalFn() { console.log('normalFn'); } asyncFn(normalFn); // asyncFn // normalFn
事件监听：这是一种事件驱动模式，异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生。比如通过点击按钮或者trigger的方式触发这个事件。
发布/订阅模式（又称观察者模式）：其实它像是事件监听模式的升级版。在发布/订阅模式中，可以想象存在一个消息中心的地方，首先可以在里边“注册一条消息”，之后被注册的这条消息可以被感兴趣的若干人“订阅”，一旦未来这条“消息被发布”，则所有订阅了这条消息的人都会得到提醒。这个就是发布/订阅模式的设计思路，接下来我们来实现一个简单的发布/订阅模式：
首先我们先实现一个消息中心的雏形：
// 先实现一个消息中心的构造函数，用来创建一个消息中心 function MessageCenter(){ var _messages = {}; // 所有注册的消息都存在这里 this.regist = function(){}; // 用来注册消息的方法 this.subscribe = function(){}; // 用来订阅消息的方法 this.fire = function(){}; // 用来发布消息的方法 }
接下来完善下regist，subscribe和fire这三个方法：
function MessageCenter(){ var _messages = {}; // 对于regist方法，它只负责注册消息，就只接收一个注册消息的类型(标识)参数就好了。 this.regist = function(msgType){ // 判断是否重复注册 if(typeof _messages[msgType] === 'undefined'){ _messages[msgType] = []; // 数组中会存放订阅者 }else{ console.log('这个消息已经注册过了'); } } // 对于subscribe方法，需要订阅者和已经注册了的消息进行绑定，msgType是要被绑定的消息类型，subFn是订阅者得到消息后的处理函数 this.subscribe = function(msgType, subFn){ // 判断是否有这个消息 if(typeof _messages[msgType] !== 'undefined'){ _messages[msgType].push(subFn); }else{ console.log('这个消息还没注册过，无法订阅') } } // 最后我们实现下fire这个方法，就是去发布某条消息，并通知订阅这条消息的所有订阅者函数 this.fire = function(msgType, args){ // msgType是消息类型或者说是消息标识，而args可以设置这条消息的附加信息 // 还是发布消息时，判断下有没有这条消息 if(typeof _messages[msgType] === 'undefined') { console.log('没有这条消息，无法发布'); return false; } var events = { type: msgType, args: args || {} }; _messages[msgType].forEach(function(sub){ sub(events); }) } }
这样，一个简单的发布/订阅模式就完成了，此时我们就可以用他来处理一些异步操作了：
var msgCenter = new MessageCenter(); msgCenter.regist('A'); msgCenter.subscribe('A', subscribeFn); function subscribeFn(events) { console.log(events.type, events.args); // A, fire msg } // ----- setTimeout(function(){ msgCenter.fire('A', 'fire msg'); }, 1000);
接下来几个函数用来解决,异步中 回调函数嵌套问题 (callback hell) 回调地狱。
Promise：ES6推出的一种异步编程的解决方案。其实在ES6之前，很多异步的工具库就已经实现了各种类似的解决方案，而ES6将其写进了语言标准，统一了用法。Promise解决了回调等解决方案嵌套的问题并且使代码更加易读，有种在写同步方法的既视感：
function asyncFn1() { console.log('asyncFn1 run'); return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(); }, 1000) }) } function asyncFn2() { console.log('asyncFn2 run'); return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(); }, 1000) }) } function normalFn3() { console.log('normalFn3 run'); } asyncFn1().then(asyncFn2).then(normalFn3); // f1返回一个Promise对象，经过一秒后resolve，到then(asyncFn2)里执行asyncFn2函数 ，经过一秒后resolve，到then(normalFn3)里执行normalFn3函数。
Generator函数：是一种特殊的函数，他有这么几个特点：
声明时需要在function后面加上*，并且配合函数里面yield关键字来使用；
在执行Generator函数的时候，其会返回一个Iterator遍历器对象，通过其next方法，将Generator函数体内的代码以yield为界分步执行；
具体来说当执行Generator函数时，函数并不会执行，而是需要调用Iterator遍历器对象的next方法，这时程序才会执行从头或者上一个yield之后 到 到下一个yield或者return或者函数体尾部之间的代码，并且将yield后面的值，包装成json对象返回。就像上面的例子中的{value: xxx, done: xxx}；value取的yield或者return后面的值，否则就是undefined，done的值如果碰到return或者执行完成则返回true，否则返回false。事实上Generator函数不像Promise一样是专门用来解决异步处理而产生的，人们只是使用其特性来产出了一套异步的解决方案，所以使用Generator并不像使用Promise一样有一种开箱即用的感觉。其更像是在Promise或者回调这类的解决方案之上又封装了一层。
接下来如何使用Generator函数进行异步编程：
var g; function asyncFn() { setTimeout(function(){ g.next(); }, 1000) } function normalFn() { console.log('normalFn run'); } function* oneGenerator() { yield asyncFn(); return normalFn(); } g = oneGenerator(); g.next(); // 这里在我调用next方法的时候执行了asyncFn函数 // 然后我们的希望是在异步完成时自动去再调用g.next()来进行下面的操作，所以我们必须在上面asyncFn函数体内的写上g.next(); 这样才能正常运行。
Async/Await
async-await 是建立在 promise机制之上的，它是promise和generator的语法糖。Generator 函数的执行必须靠执行器（next），而async函数自带执行器。
async函数使用方法：需要async放置在函数的前面。async函数总是返回一个promise，async函数是没有return返回值的。如果代码中有return，JavaScript会自动把返回的这个value值包装成promise的resolved值。如下，返回为resolve为1的promise对象：
async function f() { return 'hello world'; } f().then(v => console.log(v)) // "hello world"
async函数内部抛出错误，会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到：
async function f() { throw new Error('出错了'); } f().then( v => console.log(v), e => console.log(e) ) // Error: 出错了
async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。
async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。
async function getTitle(url) { let response = await fetch(url); let html = await response.text(); return html.match(/<title>([sS]+)</title>/i)[1]; } getTitle('https://tc39.github.io/ecma262/').then(console.log) // 函数getTitle内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行then方法里面的console.log。
await命令：正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象：
async function f() { return await 123; } f().then(v => console.log(v)) // 123
await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到：
async function f() { await Promise.reject('出错了'); } f() .then(v => console.log(v)) .catch(e => console.log(e)) // 出错了
只要一个await语句后面的 Promise 变为reject，那么整个async函数都会中断执行：
async function f() { await Promise.reject('出错了'); await Promise.resolve('hello world'); // 不会执行 }
有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行：
async function f() { try { await Promise.reject('出错了'); } catch(e) { } return await Promise.resolve('hello world'); } f().then(v => console.log(v)) // hello world
另一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误：
async function f() { await Promise.reject('出错了') .catch(e => console.log(e)); return await Promise.resolve('hello world'); } f() .then(v => console.log(v)) // 出错了 // hello world
关于Async/Await的执行顺序
这里的执行顺序挺复杂的，接下来看几个在网上例子吧！
function consoleA(){ console.log("A") } async function consoleB(){ await consoleA() // await 相当与于执行了一个 Promise.then(....) console.log("B") // 而console.log("B") 在 then 里 } (function consoleC(){ consoleB().then(_ => { console.log("D") }) console.log("C") })() // 依次输出 A C B D
以上例子中，首先consoleC函数执行，之后调用consoleB函数，await consoleA()之后执行consoleA函数, 打印 "A" ，consoleA函数直接返回，await consoleA是Promise对象相当于await consoleA().then(() => {console.log("B") })，所以把console.log("B")加入执行队列（task queue ），consoleB函数返回，同理consoleB().then() 把 console.log("D") 加入了执行队列（task queue） ，之后执行同步任务console.log("C") 打印 "C"，当前 task 结束。task queue 还有两个任务，一个是 log("B") ，一个是 log("D") ，相继执行。
接下来看一个复杂的例子：
function testSometing() { console.log("执行testSometing"); return "testSometing"; } async function testAsync() { console.log("执行testAsync"); return Promise.resolve("hello async"); } async function test() { console.log("test start..."); const v1 = await testSometing();//关键点1 这里会立即执行testSomething函数 console.log(v1); const v2 = await testAsync(); console.log(v2); console.log(v1, v2); } test(); var promise = new Promise((resolve)=> {
console.log("promise start..");
resolve("promise");
});//关键点2 这里立即执行了new Promise里函数 promise.then((val)=> console.log(val));
console.log('test end...'); // test start... // 执行testSometing // promise start.. // test end... // testSometing // 执行testAsync // promise // hello async // testSometing hello async
当test函数执行到const v1 = await testSometing()的时候，会先执行testSometing这个函数打印出“执行testSometing”的字符串，然后因为await 相当与执行了一个 Promise.then(....)，在这里相当于await testSometing().then(() => {console.log(v1);})，所以console.log(v1)不会立即执行，由于是异步的会放到异步任务队列里，代码会跳出函数接着向下执行，然后打印出“promise start..”，接下来会把返回的promise放入异步任务队列，继续执行打印“test end…”，等本轮事件循环执行结束后，又会跳回到test函数中（async函数），等待之前await 后面表达式testSometing()的返回值，所以返回的是一个字符串“testSometing”，test函数继续执行，执行到const v2 = await testAsync();和之前一样又会跳出test函数，执行后续代码，此时事件循环就到了异步任务队列里，执行promise.then((val)=> console.log(val))中then后面的语句，之后和前面一样又跳回到test函数继续执行。
下边的例子在上边的例子基础上做了改变，在testSometing函数前加了async，所以testSometing返回的是一个promise对象了，所以把它推到了异步任务队列里，没有立即执行，执行了之前推到异步任务队列里的promise变量，之后在回头执行的testSometing的resolve（即他的return ‘testSometing’）
async function testSometing() { console.log("执行testSometing"); return "testSometing"; } async function testAsync() { console.log("执行testAsync"); return Promise.resolve("hello async"); } async function test() { console.log("test start..."); const v1 = await testSometing(); console.log(v1); const v2 = await testAsync(); console.log(v2); console.log(v1, v2); } test(); var promise = new Promise((resolve)=> {
console.log("promise start..");
resolve("promise");
});//3 promise.then((val)=> console.log(val)); console.log("test end...") // test start... // 执行testSometing // promise start.. // test end... // promise // testSometing // 执行testAsync // hello async // testSometing hello async