Promise async generator是ES6之后才被提出来的，他们都能够用来解决以前JS异步调用产生的一系列问题，例如大名鼎鼎的回调地狱!!!
什么是回调地狱?
在以前js中，我们是无法知晓一个异步操作是否执行完成，为了在异步操作完成后执行特定的代码，我们需要传入回调函数，请看下面的栗子:
这是一个简单的例子，在请求完成后（可以理解为异步操作）执行特定的代码
//我们需要在请求完成后输出请求完成，请看回调法 function show(params) { request('这是请求参数', () => { console.log('请求完成') }) } /** * 模拟发起一个http请求 * @param {object} data 请求的参数 * @param {function} callBack 回调函数 */ function request(data, callBack) { //下面的定时器模拟请求时间 setTimeout(data => { callBack(data); }, 3000); } show()
一次回调当然简单，如果是在这次请求完成后需要立即发起下一次请求呢？例如需要请求request10次，必须在上次请求完成后才能进行下一次请求，来看看 回调地狱 是怎么样的
//我们需要在请求完成后输出请求完成，请看回调法 function show(params) { request('这是请求参数', () => { console.log('请求完成1次') request('这是请求参数', () => { console.log('请求完成2次') request('这是请求参数', () => { console.log('请求完成3次') request('这是请求参数', () => { console.log('请求完成4次') request('这是请求参数', () => { console.log('请求完成5次') //这才第五次..... }) }) }) }) }) } /** * 模拟发起一个http请求 * @param {object} data 请求的参数 * @param {function} callBack 回调函数 */ function request(data, callBack) { //下面的定时器模拟请求时间 setTimeout(data => { callBack(data); },1000); } show()
这才第5次回调，但是代码的可读性已经极差了！
让我们先看看 Promise async generator怎么解决这个问题，后面再说其使用方式
首先 Promise 篇
//我们需要在请求完成后输出请求完成，请看回调法 function show(params) { request('这是请求参数').then( resolve => { console.log('请求完成1次'); return request('这是请求参数') } ).then( resolve => { console.log('请求完成2次'); return request('这是请求参数') } ).then( resolve => { console.log('请求完成3次'); return request('这是请求参数') } ).then( resolve => { console.log('请求完成4次'); return request('这是请求参数') } ).then( resolve => { console.log('请求完成5次'); return request('这是请求参数') } ) } /** * 模拟发起一个http请求 * @param {object} data 请求的参数 * @param {function} callBack 回调函数 */ function request(data) { return new Promise( resolve => { //下面的定时器模拟请求时间 setTimeout(data => { resolve(data) }, 1000); } ) } show()
虽然还是很长，但是至少嵌套很少了，可读性也比之前更高
再来看看 async
切记，async必须和Promise配合使用
//我们需要在请求完成后输出请求完成，请看回调法 async function show(params) { let result = await request('这是请求参数') console.log('请求完成1次'); result = await request('这是请求参数') console.log('请求完成2次'); result = await request('这是请求参数') console.log('请求完成3次'); result = await request('这是请求参数') console.log('请求完成4次'); result = await request('这是请求参数') console.log('请求完成5次'); } /** * 模拟发起一个http请求 * @param {object} data 请求的参数 * @param {function} callBack 回调函数 */ function request(data) { return new Promise( resolve => { //下面的定时器模拟请求时间 setTimeout(data => { resolve(data) }, 1000); } ) } show()
代码是不是更加简短了？而且看起来和同步一样，事实上，这就是使用同步的方式写异步代码，这代码也是同步执行的
最后看看 generator
//我们需要在请求完成后输出请求完成，请看回调法 function* show() { let a1 = yield request('请求参数', () => { console.log('这是第1次调用'); }); let a2 = yield request('请求参数', () => { console.log('这是第2次调用'); }); let a3 = yield request('请求参数', () => { console.log('这是第3次调用'); }); let a4 = yield request('请求参数', () => { console.log('这是第4次调用'); }); let a5 = yield request('请求参数', () => { console.log('这是第5次调用'); }); } /** * 模拟发起一个http请求 * @param {object} data 请求的参数 * @param {function} callBack 回调函数 */ function request(data, callBack) { //下面的定时器模拟请求时间 setTimeout(() => { callBack(data) }, 1000); } let a = show() a.next(); a.next(); a.next(); a.next(); a.next();
以上是异步编程的ES6解决方案，接下来让我们把这3种方式都详细了解下
一.Promise
关于Promise的一些原型，函数，请移步
Promise的中文名，也就是承诺，保证，