异步请求回调嵌套解决方案

摘要：前言在前端异步请求中，要获取数据，传统的写法是回调，但这种方法不利于代码的维护和可读性，所以时代通过和解决了这种问题，更是通过和使其更加简洁通过替代回调嵌套的特点是初始化后，调用一次方法会暂停在关键字前，同时也可以在方法里传值，使对应的语句

在前端异步请求中，要获取数据，传统的写法是ajax回调，但这种方法
不利于代码的维护和可读性，所以es6时代通过Generator和Promise解决了这种问题，es7更是通过async和await使其更加简洁

Generator的特点是初始化后，调用一次next方法会暂停在yield关键字前，同时也可以在next方法里传值，使对应的yield语句获取到

首先编写准备代码

const axios = require("axios")

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


let it;

定义的it是迭代器的意思，现在还没有值

异步请求调用方法

function call(url,options={}) {
    setTimeout(()=>{
        if ( !it ) {
            throw new Error("请初始化生成器")
        }
        http(url,options)
        .then(v=>{
            
            it.next(v.data)  // 生成器传递参数，并且启动下一次执行
        })
    },0)
}

用setTimeout包裹，是确保这段代码是异步执行，如果不加，同步执行的it判断可能会抛出异常

编写生成器，这里是主要的异步请求逻辑处理

/**
    多个请求互相依赖
    1. 根据用户名，密码获取用户凭证
    2. 根据用户凭证获取用户数据id列表
    3. 获取数据列表中第一条数据详情
*/
function * getData() {
    const data1 = yield call("/login", { method: "POST", data: JSON.stringify({user:"root",pass:"123456"}) })
    console.log("我是结果1：",data1)
    const data2 = yield call("/list", { method: "POST", headers: { token: data1.data.token } })
    console.log("我是结果2：",data2)
    const data3 = yield call("/item", { method: "POST", headers: { token: data1.data.token }, data: JSON.stringify({ id:data2.data.ids[0] }) })
    console.log("我是结果3：",data3)  
}

调用，运行

it = getData()
it.next()

这里给it附上值，然后会触发第2步的代码

首先我们定义了生成器，运行它的时候，只需执行it.netx,然后会运行第一个yield后面的语句，并停在第一个yield语句处，当call函数里的异步请求执行完毕，会将异步请求的结果it.next(data)传递给第一个yield前面的取值语句，然后会执行到第二个yield语句后面的call,以此类推，直到整个生成器执行完毕

单个通过Generator已经可以解决大部分异步嵌套的问题，但是不够完善，要确保it初始化，必须让整个call异步执行，代码不够优雅，而且依赖外部it,结构分散，所以我们用Generator + Promise可以进一步完善

简化call方法

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

去掉在call里执行it.next

增加外部调用生成器next函数run

function run (g) {
  const it = g();  // 初始化生成器, 注意这里的冒号
  
  (function each(res) {
      // 根据生成器的返回结果进行判断
      if (!res.done && res.value instanceof Promise ) {  // 如果是Promise返回
          res.value.then(v=>{
              each( it.next(v.data) )    // 这里是方案一的call里的next并传值到下一次next 
          })
      } else if (res.done) {    // 生成器执行结束, 运行结束
          return
      } else {
          throw new Error("yield 后面请用返回Promise的函数")
      }
  })(it.next())    //自运行
}

运行

run(getData)

运行方法一中的getData生成器，得到的结果一样

getData里yield后的函数扩展

根据run函数可知，只要it.next返回的结果是Promise即可正常运行，那么在getData里如下写法也是可以的

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

**这里的http函数是axios的一个实例，返回值为Promise，
外层加call是可以在call里写一些异常，或者测试处理，类似React的dva处理方式**

如果你觉得方案二还是有些繁琐，那么可以试试ES7的await语法

改造getData函数如下

/**
    多个请求互相依赖
    1. 根据用户名，密码获取用户凭证
    2. 根据用户凭证获取用户数据id列表
    3. 获取数据列表中第一条数据详情
*/
async function getData() {
    const { data:data1 } = await call("/login", { method: "POST", data: JSON.stringify({user:"root",pass:"123456"}) })
    console.log("我是结果1：",data1)
    const { data:data2 } = await call("/list", { method: "POST", headers: { token: data1.data.token } })
    console.log("我是结果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("我是结果3：",data3)  
}

和方案二比较这个方法头部多了async关键字，去掉了*号，yield换成了await,这是ES7异步函数的声明方式。
注意返回值不是通过方案二中next res.data注入，所以获取到的是整个res，取值的时候注意拿结果里的.data数据

运行

getData()

结果和方案一二一样，这种方式更加简洁易懂

个人比较喜欢简洁有效的代码，所以推荐方案三

const axios = require("axios")

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


/**
    多个请求互相依赖
    1. 根据用户名，密码获取用户凭证
    2. 根据用户凭证获取用户数据id列表
    3. 获取数据列表中第一条数据详情
*/
async function getData() {
    const { data:data1 } = await http("/login", { method: "POST", data: JSON.stringify({user:"root",pass:"123456"}) })
    console.log("我是结果1：",data1)
    const { data:data2 } = await http("/list", { method: "POST", headers: { token: data1.data.token } })
    console.log("我是结果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("我是结果3：",data3)  
}

getData() //运行

以上代码仅完成了核心功能，一些防御性和异常处理不完善，仅供理解和学习