Как выполнить функцию с обещанием Ajax?

Question

У меня есть две функции, мне нужно выполнить функцию Ajax (функция 1) перед запуском функции 2.Я немного запутался в том, как это сделать, я думаю, что это нужно сделать с помощью обещания, но мне немного непонятно, как это сделать, можно привести пример?

функция 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
    })

Надеюсь, это поможет вам.