javascript - JavaScript 延迟对象 - 在 Promise 之后运行两个异步请求
问题描述
我有一个包含三个选择选项的菜单。第一个选择是其余两个的驱动程序;他们需要第一个菜单项的值来填充。但是,它们是并行的——这两者都不相互依赖,因此它们的 ajax 调用可以并行运行。
我当前的步骤对第一个菜单进行了 ajax 调用,然后使用 .then() 方法调用下一个菜单,并使用另一个 .then() 调用最后一个菜单。这不是很有效。我试图弄清楚如何让两个子菜单调用都在一个 .then() 下运行
//Get campus list and build menu
$.getJSON(apiURL)
.then( function(campusdata) {
buildMenu('campus', campusdata);
return $.getJSON(apiURL + '/colleges/' + $campus.val());
})
//Build college menu
.then(function(collegedata) {
buildMenu('college', collegedata);
return $.getJSON(apiURL + '/campus-year-terms/' + $campus.val());
})
//Build academic terms submenu
.then(function(termdata){
buildMenu('term', termdata);
})
.done(function(){
<other stuff that can really be completeduntil menus are populated>
})
.fail(console.log.bind(console));
解决方案
你应该使用Promise.all
$.getJSON(apiURL)
.then( function(campusdata) {
buildMenu('campus', campusdata);
// use `Promise.all` to run two parallel ajax calls
return Promise.all([
$.getJSON(apiURL + '/colleges/' + $campus.val()),
$.getJSON(apiURL + '/campus-year-terms/' + $campus.val())
]);
})
// result will be an array containing the json data from both calls
.then(function(result) {
buildMenu('college', result[0]);
buildMenu('term', result[1]);
})
.done(function(){
<other stuff that can really be completeduntil menus are populated>
})
.fail(console.log.bind(console));
推荐阅读
- ios - MacOS Catalyst:如何允许双击 UIView 来缩放窗口?
- android - 如何使用 Kotlin 从 Paging 3 Android 获取总项目以实现每个项目的 onclicklistener?
- node.js - API 路由适用于邮递员,但不适用于客户端应用程序
- javascript - Webpack“找不到模块:错误:无法解析'./src/'”
- python - django gunicorn 在发送文件时卡住了
- php - 如果我同时上传两者,aws ec2 目录是否 html 优先于 php?
- amazon-web-services - Android Studio,DynamoDB Query也使用排序键
- c# - 如何将十进制数划分为与原始数字相加的四舍五入部分?
- python - 房间和物品字典问题,基于 Python 文本的游戏
- pandas - 如何在 Pandas DataFrame 中格式化单列?