异步ajax请求之间可能会有依赖情况，本篇以定时器模拟请求，总结了几种通过async await和Promise将异步转为同步的方案

异步ajax请求之间可能会有依赖情况，本篇以定时器模拟请求，总结了几种通过async await和Promise将异步转为同步的方案

// get1请求、get2请求
function get1 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      num1 += 1
      console.log('get1执行')
      resolve(num1)
    }, 2000)
  })
}
function get2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      num2 += 2
      console.log('get2执行')
      resolve(num2)
    }, 1000)
  })
}

1.异步请求，无依赖

get1 ()
get2 ()
// get2执行 get1执行

2.Promise.all()：get3依赖get1和get2,get1和get2之间异步执行

Promise.all([get1(), get2()]).then((data) => {
  console.log(data)
})
// get2执行 get1执行 [1, 2]

then的函数体会在get1和get2的回调完成后执行，参数data是get1和get2的resolve（）参数值组成的数组

3.get3依赖get1和get2,且get1和get2同步执行

方案1：async await：

async function get3 () {
  await get1()
  await get2()
  console.log(num1 + num2)
}
get3() // get1执行 get2执行 3

get3函数体会在get1和get2回调执行完执行
get1和get2同步执行，即get2会等get1回调执行后开始执行

方案2：Promise.all() await

async function get3 () {
  Promise.all([await get1(), await get2()]).then((data) => {
    console.log(data)
  })
}
get3() // get1执行 get2执行 [1, 2]

.get3依赖get1和get2,get1和get2有一个进入catch,阻塞get3

async function get3 () {
  let get1Flage = await get1().catch(() => {
    return false
  })
   if (!get1Flage) {
    return // 不再继续执行
  }
  let get2Flage = await get2().catch(() => {
    return false
  })
  if (!get2Flage ) {
    return // 不再继续执行
  }
  console.log(num1 + num2)
}

确保只有get1和get2都成功才会执行get3

来源:https://blog.csdn.net/qq_37246828/article/details/89478818

参考:https://www.jianshu.com/p/3457a7ab4afb