英文:
Javascript, jQuery: How to write nested Promises in LOOPS in more LOOPS?
问题
以下是您要翻译的内容:
"What kind of JavaScript or jQuery construction of callbacks and/or promises can be used in such a case? Can it be done at all?
I tried this working minimal example (/vocab and /vocab2 are REST services):
"use strict";
window.onload = function(e)
{
console.log("HELLO WORLD");
var promises = [];
promises.push(doxxx());
Promise.all(promises).then(
dozzz();
);
}
function doxxx()
{
console.log('doxxx CALLED');
$.ajax({
url: '/vocab',
type: 'POST',
dataType: 'json',
success: function(result)
{
console.log(result.data);
var promises = [];
$.each(result.data, function( index, value )
{
promises.push(doyyy(value[3]));
});
return Promise.all(promises);
}
});
}
function doyyy(german)
{
console.log('doyyy CALLED');
$.ajax({
url: '/vocab2',
type: 'POST',
data: {german : german},
dataType: 'json',
success: function(result)
{
return new Promise(function(myResolve, myReject)
{
console.log(result.data);
})
}
});
}
function dozzz()
{
console.log("END");
}
I expected all nested promises to be fullfilled before dozzz() is called and "END" is printed to the console.
But it was not working. It printed "END" before "doxxx CALLED" and "doyyy CALLED."
UPDATE
I tried the answer from Alexander Nenashev.
It worked.
Thank you.
Console output in correct order"
英文:
What kind of JavaScript or jQuery construction of callbacks and/or promises can be used in such a case? Can it be done at all?
I tried this working minimal example (/vocab and /vocab2 are REST services):
"use strict";
window.onload = function(e)
{
console.log("HELLO WORLD");
var promises = [];
promises.push(doxxx());
Promise.all(promises).then(
dozzz();
);
}
function doxxx()
{
console.log('doxxx CALLED');
$.ajax({
url: '/vocab',
type: 'POST',
dataType: 'json',
success: function(result)
{
console.log(result.data);
var promises = [];
$.each(result.data, function( index, value )
{
promises.push(doyyy(value[3]));
});
return Promise.all(promises);
}
});
}
function doyyy(german)
{
console.log('doyyy CALLED');
$.ajax({
url: '/vocab2',
type: 'POST',
data: {german : german},
dataType: 'json',
success: function(result)
{
return new Promise(function(myResolve, myReject)
{
console.log(result.data);
})
}
});
}
function dozzz()
{
console.log("END");
}
I expected all nested promises to be fullfilled before dozzz() is called and "END" is printed to the console.
But it was not working. It printed "END" before "doxxx CALLED" and "doyyy CALLED."
UPDATE
I tried the answer from Alexander Nenashev.
It worked.
Thank you.
答案1
得分: 0
使用async/await
会使代码更加可管理、可读和可维护。
"use strict";
window.onload = async function(e) {
console.log("HELLO WORLD");
await doxxx();
dozzz();
}
async function doxxx() {
console.log('doxxx CALLED');
const result = await $.ajax({
url: '/vocab',
type: 'POST',
dataType: 'json',
});
console.log(result.data);
return Promise.all($.map(result.data, (_, value) => doyyy(value[3])));
}
async function doyyy(german) {
console.log('doyyy CALLED');
const result = await $.ajax({
url: '/vocab2',
type: 'POST',
data: { german: german },
dataType: 'json',
});
console.log(result.data);
}
function dozzz() {
console.log("END, but not the END");
}
英文:
Use async/await
it will make the code more manageable, readable and maintainable.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
"use strict";
window.onload = async function(e)
{
console.log("HELLO WORLD");
await doxxx();
dozzz();
}
async function doxxx()
{
console.log('doxxx CALLED');
const result = await $.ajax({
url: '/vocab',
type: 'POST',
dataType: 'json',
});
console.log(result.data);
return Promise.all($.map(result.data, (_, value) => doyyy(value[3])));
}
async function doyyy(german)
{
console.log('doyyy CALLED');
const result = await $.ajax({
url: '/vocab2',
type: 'POST',
data: {german : german},
dataType: 'json',
});
console.log(result.data);
}
function dozzz()
{
console.log("END, but not the END");
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论