循环中使用同步请求

Posted 2020-12-21 ericzlin

• 循环下的异步

  let  inner = [‘in1‘,‘in2‘,‘in3‘];
  function runTask(){
      console.log(‘任务开始‘)
      for (let index = 0; index < inner.length; index++) {
          const i = inner[index];
          setTimeout(() => {
              console.log(`inner里的${i}完成`)
          }, 100);
          
      }
      console.log(‘任务完成‘)
  }
  
  runTask()
  /*
  任务开始
  任务完成
  inner里的in1完成
  inner里的in2完成
  inner里的in3完成
  */
  
  
  

• 使用for循环同步

  let  inner = [‘in1‘,‘in2‘,‘in3‘];
  
  async function runTask(){
      const timeout = (i)=>{
          return new Promise(res=>{
              setTimeout(() => {
                  console.log(`inner里的${i}完成`)
                  res()
              }, 100);
          })
      }
      console.log(‘任务开始‘)
      for (let index = 0; index < inner.length; index++) {
          const i = inner[index];
          await timeout(i)
      }
      console.log(‘任务完成‘)
  }
  
  runTask()
  /*
  任务开始
  inner里的in1完成
  inner里的in2完成
  inner里的in3完成
  任务完成
  */
  

• forEach使用await无效：由于在foreach中已经完成了一次对于循环的封装，当 使用foreach时其实也就相当于调用了一个封装了while或者for循环的函数，这个函数本身并没有使用async/await来处理异步，所以使用时在回调函数里面加上async/await是没有作用的

  let  inner = [‘in1‘,‘in2‘,‘in3‘];
  
  function runTask(){
      const timeout = (i)=>{
          return new Promise(res=>{
              setTimeout(() => {
                  console.log(`inner里的${i}完成`)
                  res()
              }, 100);
          })
      }
      console.log(‘任务开始‘)
      inner.forEach(async (i)=>{
          await timeout(i)
      })
      console.log(‘任务完成‘)
  }
  
  runTask()
  /*
  务开始
  任务完成
  inner里的in1完成
  inner里的in2完成
  inner里的in3完成
  */
  

• 多层循环下使用同步

  let  outer = [‘out1‘,‘out2‘,‘out3‘],inner = [‘in1‘,‘in2‘,‘in3‘];
  
  async function runTask(){
      const timeout1 = (outer) => {
          return new Promise(res => {
              setTimeout(() => {
                  //console.log(out)
                  res()
              }, 1000);
          })
      }
      const timeout2 = (inner)=>{
          return new Promise(res=>{
              setTimeout(()=>{
                  //console.log(inner)
                  res()
              },500)
          })
      }
      console.log(‘任务开始‘)
      for (let index = 0; index < outer.length; index++) {
          const o = outer[index];
          for (let index = 0; index < inner.length; index++) {
              const i = inner[index];
              await timeout1(i)
              console.log(`inner里的${i}完成`)
          }
          await timeout2(o)
          console.log(`outer里的${o}完成`)
      }
      console.log(‘任务完成‘)
  }
  
  runTask()
  
  /*
  任务开始
  inner里的in1完成
  inner里的in2完成
  inner里的in3完成
  outer里的out1完成
  inner里的in1完成
  inner里的in2完成
  inner里的in3完成
  outer里的out2完成
  inner里的in1完成
  inner里的in2完成
  inner里的in3完成
  outer里的out3完成
  任务完成
  */