1，什么是单线程，和异步有什么关系
单线程-只有一个线程，只能做一件事
单线程的原因：避免DOM 渲染的冲突
- 浏览器需要渲染DOM
- JS 可以修改DOM 结构
- JS 执行的时候，浏览器DOM 渲染会暂停
- 两段JS 也不能同时执行（都修改DOM 就冲突了）
- webworker支持多线程，但是不能访问DOM
怎么解决：用异步，提高性能。但是异步的代码会有很多比较多难以理解的问题，比如
- 没有按照我们代码的顺序执行，可读性差
- callback中不同意模块化，易出现回调地狱。
我们平常的工作中常见的一步的函数入 setTimeout(fn,time) ，以及常见的网络请求，如 Ajax 等。
js的执行机制就是先跑完同步的代码，在轮询去读异步队列里面的函数。（等等会讲到）
如下图两个例子：
下图中的例子使用 setTimeout 来写的，所以它是一个异步函数。
输出的结果是：
100
300
400
200
下图中的例子是 ajax 的例子，也是一个异步函数，js执行的时候，会把 Ajax 放在异步队列中，等待同步代码全都执行完了再去轮询代码。
接下去我们讲讲事件轮询 (event-loop)
2，什么是 event-loop
event-loop 是 js 异步的一种实现方式。
他的意思简单来说就是：
- 同步代码，直接执行
- 异步函数先放在异步队列中
- 待同步函数执行完毕，轮询执行异步队列的函数
我们可以具体看几个例子：
例子一
就是一个setTimeout函数，200s以后输出打印100。我们可以看到的是，console.log(200) 是同步代码，而setTimeout 则是一个异步函数。
setTimeout(function () {
console.log(100)
})
console.log(200)
那么我么就可以得到下图。
所以输出结果为：
200,
100
例子二
这里我们有两个 setTimeout ，但是一个时间是0ms，另外一个是100ms。所以我们能得到图二，主进程中是 console.log(3)，而在异步队列中的两个 setTimeout , 0秒的立刻就被放入我们的进程中，还有一个是隔100ms被放入异步队列。
setTimeout(function () {
console.log(1)
}, 1000)
setTimeout(function () {
console.log(2)
})
console.log(3)
所以上图的程序的结果应该是：
3,
2,
1
例子三
我们来看一个稍微复杂的函数，setTimeout 和 ajax 都存在的函数。这里的结果我们可以思考一下。
$.ajax({
url: './data.json',
success: function () {
console.log('a')
}
})
setTimeout(function () {
console.log('b')
}, 1000)
setTimeout(function () {
console.log('c')
})
console.log('d')
看下下面的图，应该可以马上明白了。
这里应该有两种输出结果，当我们 ajax 返回的速度快于100ms的时候，那么就会先输出a，如果 ajax 速度很慢的时候，慢于100ms，那么我们就会先输出 b，在输出 a。
3，是否用过 jquery 的 Deferred
简单的来讲，Deferred 就是 promise 的前世。
在开发中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。但是，一旦回调层级过深，处理和维护会变得相当困难。即我们常说的回调地狱。
在 JQuery 中,低于 1.5.0 版本，$.ajax() 返回的是XHR对象，所以不能进行链式操作，如下：
$.ajax({
url: "http://localhost:8888",
success: function(){
console.log("哈哈，成功了！");
},
error: function(){
console.log("出错啦！");
}
});
但是在版本 1.5.0 之后，$.ajax() 返回的是 deferred 对象，可以进行链式操作了。如下：
$.ajax("http://localhost:8888")
.done(function(){
console.log("哈哈，成功了！");
})
.fail(function(){
console.log("出错啦！");
});
看了这段代码，你是不是想起了之前我们使用过的 promise。
其实我们无法改变 JS 异步和单线程的本质，所以为了解决回调地狱，我们只能从写法上杜绝callback 这种形式。deferred 它是一种语法糖形式，但是他是我们的代码变的更清晰。也很好的体现了，编程中的一个原则——开放封闭原则。
即对扩展开放，对修改封闭的原则。我们不需要把所有的代码都写在success回调中了，可以把代码很好的解耦出来，便于更好的维护和测试。
下面我们来看看一个对于 deferred 的简单封装：
// 已经封装好的（A 员工）
function waitHandle() {
// 定义
var dtd = $.Deferred()
var wait = function (dtd) {
var task = function () {
console.log('执行完成')
dtd.resolve() // 成功
// dtd.reject() // 失败
}
setTimeout(task, 1000)
return dtd.promise() // wait 返回
}
return wait(dtd) // 最终返回
}
// 使用（B 员工）
var w = waitHandle() // promise 对象
$.when(w).then(function () {
console.log('ok 1')
}, function () {
console.log('err 1')
})
上述示例中，结果会输出
执行完成
ok1 // 1s后
这里我们讲几个要点
deferred.resolve()和deferred.reject()。说明其作用需要先说一下jQuery规定deferred对象的三种执行状态：未完成、已完成和已失败。$.when(deferreds)方法只能接收defferred对象作为参数，所以我们要给上述函数返回一个deferred对象-
我们
wait函数返回的是dtd.promise()，而不是简单的dtd对象，是因为dtd的API可分成两类，用意不同。一类是判断是否成功这个状态， 另一个则是判断成功或者失败后，该做什么事情。这两个应该分开。 总结，dtd 的 API 可分成两类，否则后果很严重！我们可以在wait函数返回一个dfd。 然后在最末尾加上一句w.reject()。输出结果为:err 1 执行完成这个是我们需要非常注意的。因为返回
dtd.promise()之后，我们就访问不到reject与resolve这两个接口了。下面这张的
dfd的api。
这张的dfd.promise的 api。
相关链接：jQuery的deferred对象详解，面向对象编程的6大原则，
4，Promise 的基本使用和原理
4.1 基本语法回顾
先看个简单的例子：
function loadImg(src) {
var promise = new Promise(function (resolve, reject) {
var img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject('图片加载失败')
}
img.src = src
})
return promise
}
var src = 'http://static.clewm.net/cli/images/cli_logo@2x.png'
var result = loadImg(src)
result.then(function (img) {
console.log(1, img.width)
return img
}, function () {
console.log('error 1')
}).then(function (img) {
console.log(2, img.height)
})
上述的代码，输出的结果是：
1 300
2 54
代码很简单，就是加载一张图片，当图片加载成功的时候显示图片的宽度与宽度，我们首先 new 一个 promise对象，然后针对图片加载成功或者失败，做一些操作。 都是一些常规的操作。
4.2 异常捕获
我们改造一下代码，loadimg 函数不变，改变下面调用的方式：
var src = 'http://static.clewm.net/cli/images/cli_logo@2x.png'
var result = loadImg(src)
result.then(function (img) {
console.log(1, img.width)
return img
}).then(function (img) {
console.log(2, img.height)
}).catch(function (ex) {
// 统一捕获异常
console.log(ex)
})
这里我们规定：then 只接受一个参数，最后统一用 catch 捕获异常。所以我们then只接受一个成功之后的回调。
4.3 多个 promise对象、Promise.all 和 Promise.race
这里我们在增加一个图片的请求。
var src1 = 'http://static.clewm.net/cli/images/cli_logo@2x.png'
var result1 = loadImg(src1)
var src2 = 'http://static.clewm.net/static/images/1404477720_63c377a.png?v=20150518'
var result2 = loadImg(src2)
result1.then(function (img1) {
console.log('第一个图片加载完成', img1.width)
return result2 // 重要！！！
}).then(function (img2) {
console.log('第二个图片加载完成', img2.width)
}).catch(function (ex) {
console.log(ex)
})
如果是多个串联，比如我们当一个 promise 返回成功之后，我们去返回另外一张图片的信息，我们可以如上代码一样，返回 return result2。这样我们下一个 then 得到的就是图片2的信息。
Promise.all 与 Promise.race 也很好理解，他们都接受一个包含多个promise 对象的数组，前者是当所有请求都完成时，统一去执行 then 操作，而后者则是有一个请求完成就去执行 then 操作。
如下图：
4.4 Promise 标准
这里就简单的提两点：
- 一个是
promise对象的改变是不可逆的，就只有是pending到成功或者失败，而不能反着来，同时状态也不能从成功变为失败。 - 还有一个就是
promise必须要有一个then方法。而且他必须接受两个参数作为参数，返回的也必须是一个promise实例。
相关链接：Promise 迷你书，
5， 介绍一下 async/await（和 Promise 的区别、联系）
async/await 是 es7 的语法。他不是替代 primise 的一个异步解决方案，而是使用了 Promise，并没有和 promise 冲突。
我们使用 promise 的时候，虽然看似是避免了回调地狱，但是 then 方法其实只是讲 callback 拆分了而已。
而 async/await 他的出现则是最直接的同步写法。
loadImg 方法不变，我们使用 async/await 来完成代码：
const load = async function() {
const result1 = await loadImg(src1)
console.log(result1);
const result2 = await loadImg(src2)
console.log(result2);
}
load();
因为async/await 是属于 es7 范畴的，我们需要使用 babel-polyfill，我们可以使用 cdn(babel-polyfill)。
这样我们也能得到和 promise 一样的结果。
6，总结
今天讲的一些知识都是慕课网实战视频里面 js高级面试题 里面的讲到的异步这一节内容，同时加上了自己的一些思考，感觉对于 js 异步的知识点有一种全新的认识，豁然开朗。
希望这篇文章对大家学习小程序能有帮助，来自一个奔跑在前端路上的前端小白。
