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

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

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

首先編寫(xiě)準(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)在還沒(méi)有值

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

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

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

編寫(xiě)生成器，這里是主要的異步請(qǐng)求邏輯處理

/**
    多個(gè)請(qǐng)求互相依賴
    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附上值，然后會(huì)觸發(fā)第2步的代碼

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

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

簡(jiǎ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();  // 初始化生成器, 注意這里的冒號(hào)
  
  (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 后面請(qǐng)用返回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里如下寫(xiě)法也是可以的

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的一個(gè)實(shí)例，返回值為Promise，
外層加call是可以在call里寫(xiě)一些異常，或者測(cè)試處理，類似React的dva處理方式**

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

改造getData函數(shù)如下

/**
    多個(gè)請(qǐng)求互相依賴
    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)  
}

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

運(yùn)行

getData()

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

個(gè)人比較喜歡簡(jiǎn)潔有效的代碼，所以推薦方案三

const axios = require("axios")

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


/**
    多個(gè)請(qǐng)求互相依賴
    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í)