异步处理方案

异步处理方案

◼ 学完了我们前面的Promise、生成器等，我们目前来看一下异步代码的最终处理方案。
◼ 案例需求：
我们需要向服务器发送网络请求获取数据，一共需要发送三次请求；
第二次的请求url依赖于第一次的结果；
第三次的请求url依赖于第二次的结果；
依次类推； 
   <script>
      // 封装一个请求方法
      function requestData(count){
        return new Promise((resolve,rejdect)=>{
          setTimeout(()=>{
            resolve(count)
          },2000)
        })
      }
      //1.发送了一次网络请求
      // requestData(100).then(res=>{
      //   console.log("res:",res)
      // })

      // 需求:先发送一次网络请求,等待这次网络请求的结果紧接着发送得二次网络请求

// 1.方式一:层层嵌套

      // function getData(){
      //   // 第一次请求
      //   requestData("hdc").then(res1 =>{
      //     console.log("第一次结果res:",res1)
      //     //第二次请求
      //     requestData(res1+"kobe").then(res2 =>{
      //       console.log("第二次结果res2:",res2)
      //       // 第三次请求
      //       requestData(res2+"james").then(res3=>{
      //         console.log("第三次结果res3",res3)
      //       })
      //     })
      //   })
      // }

// 2.方式二:使用Promise进行重构(解决层层嵌套)

        // function getData(){
        //   requestData("hdc").then(res1 =>{
        //     console.log("第一次结果:",res1)
        //     return requestData(res1 +",kebo")
        //   }).then(res2 =>{
        //     console.log("第二次打印:",res2)
        //     return requestData(res2+",james")
        //     }).then(res3=>{
        //       console.log("第三次结果:",res3)
        //   })
        // }

// 3. 方案三 使用生成器

          // function* getData(){
          //   const res1 =yield requestData("hdc")
          //   const res2 =yield requestData(res1+",kobe")
          //   const res3 =yield requestData(res2+",james")
          // }
          // const generator = getData()
          // generator.next().value.then(res1 =>{
          //   generator.next(res1).value.then(res2 =>{
          //     generator.next(res2).value.then(res3 =>{
          //       generator.next(res3)
          //       console.log(res1,res2,res3)
          //     })
          //   })
          //   })

// 4.方案四 使用async/await

        async function getData(){
            const res1 =await requestData("hdc")
            console.log(res1)
            const res2 =await requestData(res1+",kobe")
            console.log(res2)
            const res3 =await requestData(res2+",james")
            console.log(res3)
          }
          const generator = getData()
  </script>