摘要：前言在前端異步請求中，要獲取數(shù)據(jù)，傳統(tǒng)的寫法是回調(diào)，但這種方法不利于代碼的維護(hù)和可讀性，所以時代通過和解決了這種問題，更是通過和使其更加簡潔通過替代回調(diào)嵌套的特點(diǎn)是初始化后，調(diào)用一次方法會暫停在關(guān)鍵字前，同時也可以在方法里傳值，使對應(yīng)的語句

在前端異步請求中，要獲取數(shù)據(jù)，傳統(tǒng)的寫法是ajax回調(diào)，但這種方法
不利于代碼的維護(hù)和可讀性，所以es6時代通過Generator和Promise解決了這種問題，es7更是通過async和await使其更加簡潔

Generator的特點(diǎn)是初始化后，調(diào)用一次next方法會暫停在yield關(guān)鍵字前，同時也可以在next方法里傳值，使對應(yīng)的yield語句獲取到

首先編寫準(zhǔn)備代碼

const axios = require("axios")

const http = axios.create({
  baseURL: "http://127.0.0.1:89",
  timeout: 3000,
  headers: {"Accept": "application/json"}
});


let it;

定義的it是迭代器的意思，現(xiàn)在還沒有值

異步請求調(diào)用方法

function call(url,options={}) {
    setTimeout(()=>{
        if ( !it ) {
            throw new Error("請初始化生成器")
        }
        http(url,options)
        .then(v=>{
            
            it.next(v.data)  // 生成器傳遞參數(shù)，并且啟動下一次執(zhí)行
        })
    },0)
}

用setTimeout包裹，是確保這段代碼是異步執(zhí)行，如果不加，同步執(zhí)行的it判斷可能會拋出異常

編寫生成器，這里是主要的異步請求邏輯處理

/**
    多個請求互相依賴
    1. 根據(jù)用戶名，密碼獲取用戶憑證
    2. 根據(jù)用戶憑證獲取用戶數(shù)據(jù)id列表
    3. 獲取數(shù)據(jù)列表中第一條數(shù)據(jù)詳情
*/
function * getData() {
    const data1 = yield call("/login", { method: "POST", data: JSON.stringify({user:"root",pass:"123456"}) })
    console.log("我是結(jié)果1：",data1)
    const data2 = yield call("/list", { method: "POST", headers: { token: data1.data.token } })
    console.log("我是結(jié)果2：",data2)
    const data3 = yield call("/item", { method: "POST", headers: { token: data1.data.token }, data: JSON.stringify({ id:data2.data.ids[0] }) })
    console.log("我是結(jié)果3：",data3)  
}

調(diào)用，運(yùn)行

it = getData()
it.next()

這里給it附上值，然后會觸發(fā)第2步的代碼

首先我們定義了生成器，運(yùn)行它的時候，只需執(zhí)行it.netx,然后會運(yùn)行第一個yield后面的語句，并停在第一個yield語句處，當(dāng)call函數(shù)里的異步請求執(zhí)行完畢，會將異步請求的結(jié)果it.next(data)傳遞給第一個yield前面的取值語句，然后會執(zhí)行到第二個yield語句后面的call,以此類推，直到整個生成器執(zhí)行完畢

單個通過Generator已經(jīng)可以解決大部分異步嵌套的問題，但是不夠完善，要確保it初始化，必須讓整個call異步執(zhí)行，代碼不夠優(yōu)雅，而且依賴外部it,結(jié)構(gòu)分散，所以我們用Generator + Promise可以進(jìn)一步完善

簡化call方法

function call(url,options={}) {
  return http(url,options)
}

去掉在call里執(zhí)行it.next

增加外部調(diào)用生成器next函數(shù)run

function run (g) {
  const it = g();  // 初始化生成器, 注意這里的冒號
  
  (function each(res) {
      // 根據(jù)生成器的返回結(jié)果進(jìn)行判斷
      if (!res.done && res.value instanceof Promise ) {  // 如果是Promise返回
          res.value.then(v=>{
              each( it.next(v.data) )    // 這里是方案一的call里的next并傳值到下一次next 
          })
      } else if (res.done) {    // 生成器執(zhí)行結(jié)束, 運(yùn)行結(jié)束
          return
      } else {
          throw new Error("yield 后面請用返回Promise的函數(shù)")
      }
  })(it.next())    //自運(yùn)行
}

運(yùn)行

run(getData)

運(yùn)行方法一中的getData生成器，得到的結(jié)果一樣

getData里yield后的函數(shù)擴(kuò)展

根據(jù)run函數(shù)可知，只要it.next返回的結(jié)果是Promise即可正常運(yùn)行，那么在getData里如下寫法也是可以的

function * getData() {
  const data1 = yield http("/login", { method: "POST", data: JSON.stringify({user:"root",pass:"123456"}) })
  console.log("我是結(jié)果1：",data1)
  const data2 = yield http("/list", { method: "POST", headers: { token: data1.data.token } })
  console.log("我是結(jié)果2：",data2)
  const data3 = yield http("/item", { method: "POST", headers: { token: data1.data.token }, data: JSON.stringify({ id:data2.data.ids[0] }) })
  console.log("我是結(jié)果3：",data3)  
}

**這里的http函數(shù)是axios的一個實(shí)例，返回值為Promise，
外層加call是可以在call里寫一些異常，或者測試處理，類似React的dva處理方式**

如果你覺得方案二還是有些繁瑣，那么可以試試ES7的await語法

改造getData函數(shù)如下

/**
    多個請求互相依賴
    1. 根據(jù)用戶名，密碼獲取用戶憑證
    2. 根據(jù)用戶憑證獲取用戶數(shù)據(jù)id列表
    3. 獲取數(shù)據(jù)列表中第一條數(shù)據(jù)詳情
*/
async function getData() {
    const { data:data1 } = await call("/login", { method: "POST", data: JSON.stringify({user:"root",pass:"123456"}) })
    console.log("我是結(jié)果1：",data1)
    const { data:data2 } = await call("/list", { method: "POST", headers: { token: data1.data.token } })
    console.log("我是結(jié)果2：",data2)
    const { data:data3 } = await call("/item", { method: "POST", headers: { token: data1.data.token }, data: JSON.stringify({ id:data2.data.ids[0] }) })
    console.log("我是結(jié)果3：",data3)  
}

和方案二比較這個方法頭部多了async關(guān)鍵字，去掉了*號，yield換成了await,這是ES7異步函數(shù)的聲明方式。
注意返回值不是通過方案二中next res.data注入，所以獲取到的是整個res，取值的時候注意拿結(jié)果里的.data數(shù)據(jù)

運(yùn)行

getData()

結(jié)果和方案一二一樣，這種方式更加簡潔易懂

個人比較喜歡簡潔有效的代碼，所以推薦方案三

const axios = require("axios")

const http = axios.create({
  baseURL: "http://127.0.0.1:89",
  timeout: 3000,
  headers: {"Accept": "application/json"}
});


/**
    多個請求互相依賴
    1. 根據(jù)用戶名，密碼獲取用戶憑證
    2. 根據(jù)用戶憑證獲取用戶數(shù)據(jù)id列表
    3. 獲取數(shù)據(jù)列表中第一條數(shù)據(jù)詳情
*/
async function getData() {
    const { data:data1 } = await http("/login", { method: "POST", data: JSON.stringify({user:"root",pass:"123456"}) })
    console.log("我是結(jié)果1：",data1)
    const { data:data2 } = await http("/list", { method: "POST", headers: { token: data1.data.token } })
    console.log("我是結(jié)果2：",data2)
    const { data:data3 } = await http("/item", { method: "POST", headers: { token: data1.data.token }, data: JSON.stringify({ id:data2.data.ids[0] }) })
    console.log("我是結(jié)果3：",data3)  
}

getData() //運(yùn)行

以上代碼僅完成了核心功能，一些防御性和異常處理不完善，僅供理解和學(xué)習(xí)