产生原因
在前端技术刀耕火种时代，让人闻之变色的一个词就是“回调”。因为设计原因导致Javascript这门语言是单线程执行的，这就导致一些耗时的操作会阻塞当前运行线程。
为了解决这个问题，机智的开发者们引入了“同步”和“异步”这两个概念。
打个很简单的比方，去肯德基买汉堡，在柜台上排队买就是同步的，因为必须等待前面的人买好取到餐才能轮到我们；而使用手机点餐就是异步的，下完单之后我们可以想干嘛干嘛，等到收银员喊到我的号的时候再去取餐即可。
在以上场景中，去取餐就是我向肯德基注册的一个回调函数，当我的餐准备就绪，收银员喊我，就相当于调用了回调函数。
但是为什么程序员们谈回调色变呢？究其原因是因为层层回调会造成所谓的“回调地狱(callback hell)”
就像这样：
fs.readdir(source, function (err, files) {
if (err) {
console.log('Error finding files: ' + err)
} else {
files.forEach(function (filename, fileIndex) {
console.log(filename)
gm(source + filename).size(function (err, values) {
if (err) {
console.log('Error identifying file size: ' + err)
} else {
console.log(filename + ' : ' + values)
aspect = (values.width / values.height)
widths.forEach(function (width, widthIndex) {
height = Math.round(width / aspect)
console.log('resizing ' + filename + 'to ' + height + 'x' + height)
this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
if (err) console.log('Error writing file: ' + err)
})
}.bind(this))
}
})
})
}
})
好吧，不管我们能不能理解以上代码。总之，当多个异步任务需要顺序执行的时候，在刀耕火种的年代，程序员们不得不忍受着这样的煎熬。
解决办法
其实解决回调地狱的办法有很多，从代码书写层面就可以将绝大部分回调代码写的尽量简单易懂。但这都不是我们今天的主角，我们今天主要讲讲Promise。
Promise
Promise自ES6起成为Javascript的语言标准。但是其最早是由Javascript社区提出并实现的。Promise规范和标准了异步操作API，基本上所有的异步操作都可以使用Promise的写法处理。Promise对象内部保存着异步操作的结果，并通过链式调用的方式避免了回调函数层层嵌套的写法。
基本用法
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 1000)
}).then(res => {
console.log(res) // success
})
Promise构造函数接收一个函数作为参数，这个函数的两个参数分别为resolve和reject。这也是两个函数，其值会由Javascript传入，使用者只需要在异步操作完成时调用resolve函数并传入下一步操作所需要的值即可。使用者可以通过链式调用的方式为Promise对象添加后续操作。
reject函数则是在异步操作发生异常时被调用，此时Promise可以捕获到传入reject参数中的值。
new Promise((resolve, reject) => {
setTimeout(() => {
reject('error')
}, 1000)
})
.then(res => console.log('进入then: ' + res))
.catch((e) => console.log('进入catch: ' + e)) // 进入catch: error
值得一提的是，Promise代码不同于其他函数，对传入Promise构造方法中的函数不需要显示的调用执行，其会直接执行，且是作为同步任务被执行的。
setTimeout(() => console.log('timeout'))
new Promise((resolve, reject) => {
console.log('Promise')
});
console.log('main')
/*
* Promise
* main
* timeout
*/
改写回调函数
在远古时期，使用jQuery发送ajax请求的代码类似于以下：
$.ajax({
url: '/api/user/getInfo',
data: {},
dataType: 'json',
success: function (data) {
// process success
},
error: function(err) {
// process error
}
})
如果此时需要有操作在ajax请求之后执行，则就需要在success上挂载回调函数。如果此时这个操作内又包含了异步操作，那代码就会变得冗长乏味，像老太太的裹脚布一般。
而在有了Promise之后，我们可以将普通的ajax方法封装为Promise方法
function ajax(url, data = {}) {
return new Promise((resolve, reject) => {
$.ajax({
url,
data,
dataType: 'json',
success: resolve
error: reject
})
})
}
注意ajax函数，函数构造了Promise对象并将其return出来，这是帮助我们书写可读性高的异步代码的关键。
之后，我们可以使用Promise的链式调用方式来处理请求。
ajax('/api/user/getInfo')
.then(result => {
// process result
return ajax('/api/user/getOrder', { id: result.userId }))
}).then(result => {
// process result
return ajax('/api/user/getMessage', { id: result.userId })
}).then(result => {
// process result
// do something ...
})
注意每一个then的参数函数内我们又调用了个ajax函数，即返回了一个Promise对象，这也是Promise的链式调用的关键所在。
缺陷
Promise函数改变了之前回调地狱的写法，但是在根本上还是函数套函数，看起来不是那么的美观Promise一经执行，无法中断，除非抛出异常- 在
Promise外部无法通过try/catch的方式捕获Promise内部抛出的异常。
Async/Await
可以延展的说一下async/await。尽管这是一个ES7标准内的语法。
async/await可以将Promise代码组织的更像同步代码一样，其书写方式就和之前写同步代码一样，只是需要加上相应关键字。
例如，将之前的Promise代码改写为async/await
async function request(id) {
const result1 = await ajax('/api/user/getInfo', { id })
// process result1
const result2 = await ajax('/api/user/getOrder', { id })
// process result2
const result3 = await ajax('/api/user/getMessage', { id })
// process result3
}
request(1)
必须记住的是在函数上添加async关键字，从而可以在函数内使用await，否则的话会报错。
尽管async/await的书写方式很像同步代码，但是这和同步代码是不同的。
打个比方，执行一段很耗时的操作，同步的方式时JS会想，我就在这等着你，你这个操作做完了我才能去做别的事。使用async/await时JS会想，反正闲着也是闲着，我可以先把手头上的工作(主执行栈)停一停，看看有没有其他事情(回调队列或者其它执行栈)可以做的。
const asyncFunc = (n) => new Promise(res => setTimeout(() => res(n), 5000))
const call = async (n) => {
const result = await asyncFunc(n)
console.log(result)
}
setTimeout(() => {
console.log('event call!!')
}, 2000)
call(50)
// event call!!
// 50
那么这里可以引入一个问题。
小张同学在看完这篇文章之后，希望使用async/await改写计算斐波那契数列的函数，从而达到在程序计算时也可以执行其他执行栈的函数。小张同学的代码如下，你知道他错在哪里了吗？
/**
* 小张希望的输出是：
* event call!!
* fib(50)的值
* 但是运行时却不是这样的，而且程序还会卡死
* 不是说async/await可以将函数变为异步吗？那执行结果会与预期不一致呢？
*/
const fib = (n) => n === 0 ? 1 : n === 1 ? 1 : fib(n - 1) + fib(n - 2)
const asyncFunc = (n) => new Promise(res => res(fib(n)))
const call = async (n) => {
const result = await asyncFunc(n)
console.log(result)
}
setTimeout(() => {
console.log('event call!!')
}, 2000)
call(50)
展望未来
或许管道流式操作可能成为异步处理方式的新宠？
