其他分享
首页 > 其他分享> > ♠ 异步处理方案

♠ 异步处理方案

作者:互联网

♣ 异步处理方案

需求:

  1. 我们需要向服务器发送网络请求获取数据,一共需要发送三次请求;
  2. 第二次的请求url依赖于第一次的结果;
  3. 第三次的请求url依赖于第二次的结果;

依次类推;

点击查看代码
function requestData(url) {
  // 异步请求的代码会被放入到executor中
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      // 拿到请求的结果
      resolve(url)
    }, 2000);
  })
}

// 需求: 
// 1> url: url -> res: url
// 2> url: res + "aaa" -> res: urlaaa
// 3> url: res + "bbb" => res: urlaaabbb

// 1.第一种方案: 多次回调
// 回调地狱
// requestData("url").then(res => {
//   requestData(res + "aaa").then(res => {
//     requestData(res + "bbb").then(res => {
//       console.log(res)
//     })
//   })
// })


// 2.第二种方案: Promise中then的返回值来解决
//requestData("url").then(res => {
//   return requestData(res + "aaa")
// }).then(res => {
//   return requestData(res + "bbb")
// }).then(res => {
//   console.log(res)
// })
但是上面的代码其实看起来也是阅读性比较差的,有没有办法可以继续来对上面的代码进行优化呢?第三种方案: Promise + generator实现      
点击查看代码
function requestData(url) {
  // 异步请求的代码会被放入到executor中
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      // 拿到请求的结果
      resolve(url)
    }, 2000);
  })
}
//但是上面的代码其实看起来也是阅读性比较差的,有没有办法可以继续来对上面的代码进行优化呢?
// 3.第三种方案: Promise + generator实现
function* getData() {
  const res1 = yield requestData("url")
  const res2 = yield requestData(res1 + "aaa")
  const res3 = yield requestData(res2 + "bbb")
  const res4 = yield requestData(res3 + "ccc")
  console.log(res4)
}
// 1> 手动执行生成器函数
const generator = getData()
generator.next().value.then(res => {
  generator.next(res).value.then(res => {
    generator.next(res).value.then(res => {
    
      generator.next(res)
    })
  })
})
点击查看代码
function requestData(url) {
  // 异步请求的代码会被放入到executor中
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      // 拿到请求的结果
      resolve(url)
    }, 1000);
  })
}
function* getData() {
  const res1 = yield requestData("url")
  const res2 = yield requestData(res1 + "aaa")
  const res3 = yield requestData(res2 + "bbb")
  const res4 = yield requestData(res3 + "ccc")
  console.log(res4)
}

// 2> 自己封装了一个自动执行的函数
function execGenerator(genFn) {
  //拿到生成器
  const generator = genFn()
  function exec(res) {
    const result = generator.next(res)
    if (result.done) {
      return result.value
    }
    result.value.then(res => {
      exec(res)
    })
  }
  exec()
}

execGenerator(getData)

标签:异步,const,generator,方案,处理,res,yield,requestData,url
来源: https://www.cnblogs.com/sunflower-js/p/15501410.html