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

是的，Promise是遵循异步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
    })

希望这对您有所帮助。

Answer 2

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

在适当的代码块中使用resolve方法
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";
        }

    });
}

了解有关promises

的信息

如何使用Ajax Promise执行功能？

2 个答案: