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

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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.异步请求,无依赖

1
2
3
get1 ()
get2 ()
// get2执行 get1执行

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

1
2
3
4
5
6
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:

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

posted @   小小强学习网  阅读(179)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2016-11-17 ionic中返回上一页
2016-11-17 angularjs表达式中的HTML内容,如何不转义,直接表现为html元素
2016-11-17 angularjs获取参数方法
2016-11-17 trigger() & bind() 使用心得
点击右上角即可分享
微信分享提示