前序依赖的异步请求该如何处理？

问题描述

现在有三个请求1、2、3，2依赖1请求的结果作为入参，3依赖2请求的结果作为入参数。该怎么处理？

// 需求：
// 1.zs -> res: zs
// 2.res + 'aaa' -> res: zsaaa
// 1.res + 'bbb' -> res: zsaaabbb

前置：使用promise 处理异步请求

const requestData = (url)=>{
  return new  Promise((resolve,reject)=>{
    setTimout(()=>{
      return resolve(url)
    },300)
  })
}

解法1: 使用async +await

const getData = async () => {
  const res1 = await requestData('zs');
  const res2 = await requestData(`${res1}aaa`);
  const res3 = await requestData(`${res2}bbb`);
  return res3；
}
​
console.log(getData());
​

解法2: 使用then

requestData('zs').then(res=>{
  requestData(`${res}aaa`).then(res=>{
   requestData(`${res}bbb`).then(res=>{
     console.log('解法2:',res)
    })
  })
})
​
//等价写法
requestData("zs")
  .then((res) => {
    return `${res}aaa`;
  })
  .then((res) => {
    return `${res}bbb`;
  })
  .then((res) => {
    console.log("解法2-2:", res);
  });
​

解法3: 使用生成器

​
// 声明一个生成器函数
function * generateFetchData() {
  const res1 = yield requestData('zs')
  const res2 = yield requestData(res1 + 'aaa')
  const res3 = yield requestData(res2 + 'bbb')
  console.log('解法3:', res3);
}
​
​
const co = (fn) => {
  // 得到一个生成器
  const g = fn();
  
 const exec = async (param) =>{
   const res = g.next(param); // 每次传入的param 都是下一次yield 语句返回的结果
   
   if(res.done){
     return res.value
   }else{
     // 很关键，需要一步步传递参数到yield 里面
    const nextRes = await res.value
     exec(nextRes)
   }
 }
  exec();
  
}
​
co(generateFetchData);
​
​
​

参考资料

demo