Promise .then()不等待Promise链中前一个Promise的Resolve()
Promise .then()不等待Promise链中前一个Promise的Resolve()
提问于 2020-12-07 01:43:44
我对Promise的概念非常陌生，但我读到这是一种通过执行Promise chaining来使函数一个接一个地执行的有效方法。
下面的//在CLCK: CREATE TABLES上运行的代码基本上进行了两个AJAX调用，"Create Database Tables“和"Check Database Tables"，这样当我按下网页上的一个按钮时，就会在后台创建Database Tables，然后检查它们是否存在。
但是它并没有像预期的那样运行。在许多情况下，从控制台日志中可以观察到，第二个函数首先运行(或)完成。在任何情况下，这都不应该在链中发生。
看起来第二个函数没有等待第一个函数的解析。
请注意，我的函数有参数，所以我无法避免像其他文章建议的那样，在then()中调用它们时不带括号。
$(document).ready(function() {
/*PAGE VARS*/
var mainAdmStgChkTblSrvltMsg_elm = document.getElementById('mainAdmStgChkTblSrvltMsg');
var mainAdmStgCrDelTblSrvltMsg_elm = document.getElementById('mainAdmStgCrDelTblSrvltMsg');
var mainAdmStgCrTblBtn_elm = document.getElementById('mainAdmStgCrTblBtn');
/*FN DEF: CHECK TABLES*/
var chkTbl = function(tblNm) {
return new Promise(function(resolve, reject) {
$.ajax({
type: 'GET',
url: '../../../../../../app/TblSrvlt',
data: {
getType: 'chkTbl',
tblNm: tblNm
},
success: function(data) {
var srvltMsg = data.srvltMsg;
var srvltSuccess = data.srvltSuccess;
mainAdmStgChkTblSrvltMsg_elm.textContent = srvltMsg;
if (srvltSuccess === true) {
mainAdmStgChkTblSrvltMsg_elm.setAttribute('class', 'text-success');
} else {
mainAdmStgChkTblSrvltMsg_elm.setAttribute('class', 'text-danger');
}
/*RETURN RESOLVE FOR PROMISE CHAIN*/
console.log("chkTbl");
resolve();
}
});
});
};
/*FN DEF: CREATE TABLES*/
var crTbl = function(tblNm) {
return new Promise(function(resolve, reject) {
$.ajax({
type: 'POST',
url: '../../../../../../app/TblSrvlt',
data: {
postType: 'crTbl',
tblNm: tblNm
},
success: function(data) {
var srvltMsg = data.srvltMsg;
var srvltSuccess = data.srvltSuccess;
mainAdmStgCrDelTblSrvltMsg_elm.textContent = srvltMsg;
if (srvltSuccess === true) {
mainAdmStgCrDelTblSrvltMsg_elm.setAttribute('class', 'text-success');
} else {
mainAdmStgCrDelTblSrvltMsg_elm.setAttribute('class', 'text-danger');
}
/*RETURN RESOLVE FOR PROMISE CHAIN*/
console.log("crTbl");
resolve();
}
});
});
};
/*RUN ON CLCK: CREATE TABLES*/
$(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() {
Promise.resolve()
.then(crTbl("chairs"))
.then(chkTbl("chairs"))
.catch();
});
});
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-07 01:54:39
您必须将函数引用传递给.then()，这样它才能在以后调用您的函数。相反，您将立即调用函数并将它们的返回值传递给.then()，这就是为什么它们会立即被调用，而不是等待先前的承诺来解决。
更改此设置：
/*RUN ON CLCK: CREATE TABLES*/
$(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() {
Promise.resolve()
.then(crTbl("chairs"))
.then(chkTbl("chairs"))
.catch();
});要这样做：
/*RUN ON CLCK: CREATE TABLES*/
$(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() {
Promise.resolve()
.then(function() {return crTbl("chairs")})
.then(function() {return chkTbl("chairs")})
.catch(function(err) { console.log(err)});
});而且，您实际上不需要在链的开始处使用Promise.resolve()：
/*RUN ON CLCK: CREATE TABLES*/
$(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() {
crTbl("chairs")
.then(function() {return chkTbl("chairs")})
.catch(function(err) { console.log(err)});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65171111
复制相关文章
相似问题
腾讯云开发者
