如何使用 Ajax 承诺执行函数?

Question

我有两个函数，我需要在函数 2 运行之前执行一个 Ajax 函数(函数 1(。我对如何做到这一点有点困惑，我认为需要通过承诺来完成，但我有点不清楚如何做到这一点，可以举个例子吗？

功能1：

function showDetails(str) {
return new Promise(function (resolve, reject) {
if (str == "") {
document.getElementById("txtdetails").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtdetails").innerHTML = this.responseText;
}
};
$("#clientrowtestid").val(str);
xmlhttp.open("GET", "getdetails.php?q=" + str, true);
xmlhttp.send();
}
resolve("done");
});
}

功能2：

function sendLate(str) {
showDetails(str).then(function (response) {
var clientn = $("#txtdetails").find("h2").html();
var result;
var r = confirm("Send client (" + str + ") " + clientn + " a late notice?");
if (r == true) {
var taxcb = $("#taxcb").is(":checked") ? 'y' : 'n';
var taxrate = $('#taxrate').val();
var bcctocb = $("#bcctocb").is(":checked") ? 'y' : 'n';
var bcctotxt = $('#bcctotxt').val();
var duedate = $('#duedate').val();
var issuedate = $('#issuedate').val();
var additemscb = $("#additemscb").is(":checked") ? 'y' : 'n';
var additemname = $('#additemname').val();
var additemprice = $('#additemprice').val();
var dayslate = $('#dayslate').val();
var rowid = str;
$.ajax({
type: 'POST',
url: 'sendlate.php',
data: { taxcb: taxcb, taxrate: taxrate, bcctocb: bcctocb, bcctotxt: bcctotxt, duedate: duedate, issuedate: issuedate, additemscb: additemscb, additemname: additemname, additemprice: additemprice, rowid: rowid, dayslate: dayslate },
success: function (response) {
$('#result').html(response);
}
});
} else {
result = "Late notice aborted";
}
document.getElementById("result").innerHTML = result;
});
}

如您所见，我需要执行函数 1 来传播函数 2 从中收集数据的字段。承诺是最好的方法吗？有人可以给我举个例子吗？

Answer 1

代码中存在多个问题，例如，

1. 在适当的代码块中使用resolve方法
2. document.getElementById("result").innerHTML = "Late notice aborted";总是在执行。

我已经稍微更改了您的代码，并让我知道它是否有效。

// function 1
function showDetails(str) {
return new Promise(function (resolve, reject) {
if (str == "") {
document.getElementById("txtdetails").innerHTML = "";
resolve("");
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtdetails").innerHTML = this.responseText;
resolve(this.responseText);
}
};
$("#clientrowtestid").val(str);
xmlhttp.open("GET", "getdetails.php?q=" + str, true);
xmlhttp.send();
}
});
}
//  function 2
function sendLate(str) {
// call function 1 and then execute the below
showDetails(str).then(function (response) {
var clientn = $("#txtdetails").find("h2").html();
var r = confirm("Send client (" + str + ") " + clientn + " a late notice?");
if (r == true) {
var taxcb = $("#taxcb").is(":checked") ? 'y' : 'n';
var taxrate = $('#taxrate').val();
var bcctocb = $("#bcctocb").is(":checked") ? 'y' : 'n';
var bcctotxt = $('#bcctotxt').val();
var duedate = $('#duedate').val();
var issuedate = $('#issuedate').val();
var additemscb = $("#additemscb").is(":checked") ? 'y' : 'n';
var additemname = $('#additemname').val();
var additemprice = $('#additemprice').val();
var dayslate = $('#dayslate').val();
var rowid = str;
$.ajax({
type: 'POST',
url: 'sendlate.php',
data: { taxcb: taxcb, taxrate: taxrate, bcctocb: bcctocb, bcctotxt: bcctotxt, duedate: duedate, issuedate: issuedate, additemscb: additemscb, additemname: additemname, additemprice: additemprice, rowid: rowid, dayslate: dayslate },
// below `respone` is from which scope?
// is it from showDetails or from the ajax call in the current scope ?
success: function (response) {
$('#result').html(response);
}
});
} else {
document.getElementById("result").innerHTML = "Late notice aborted";
}
});
}

阅读有关承诺的信息

Answer 2

是的，承诺是遵循异步Javascript

的最佳方式

function showDetails(str){
return new Promise(function(resolve,reject){
......//
document.getElementById("txtdetails").innerHTML = this.responseText;
resolve("done")
}
}

在函数 2 中

showDetails(str).then(function(response){
// rest of the stuff after first function call
})

希望这对你有帮助。