异步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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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() 使用心得