前言

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