ES6的异步终极解决方案分享

前言

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()