Javascript 如何不使用AJAX破坏代码？

在使用AJAX编程时，我在保持代码可读性和可理解性方面遇到了问题

简介：

基本哲学很简单。我调用AJAX函数从服务器检索数据（

getServerData

）。它的一个参数是

callbackFunc

。加载数据后，数据将被传递到

callbackFunc

，并调用此函数

下面是我用来从服务器获取数据的AJAX例程：

function getServerData(urlAdress, params, callbackFunc, sender,  method){
    if (method !== "GET"){method = "POST";}
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            if (callbackFunc){callbackFunc(xhttp.responseText, sender);}
        }
    };
    if (method == "GET"){
        xhttp.open(method, urlAdress, true);
        xhttp.send();
    }
    else {
        xhttp.open(method, urlAdress, true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(params);
    }
}

以下是回调例程：

do_Select = function(responseText, sender){
 alert(responseText);
}

因此，当我想加载数据并执行某些操作时，我会像这样使用它：

getServerData("example.com/select.php", someParams, do_Select, this, "POST");

getServerData("example.com",someparams,this,"POST").then(console.log);

问题：

但是，当我的

do\u Select

函数看起来像这样时，我的头痛就来了：

    do_Select = function (responseText, sender) {
            switch (responseText) {
                case "one":
                    if (something1 === something2) {
                        //....
                        getServerData("example.com/select.php", someParams, callback2, this, "POST");
                    } else
                    {
                        //....
                        getServerData("example.com/select.php", someParams, callback3, this, "POST");
                    }

                    break;
                case "two":
                        //....
                        getServerData("example.com/select.php", someParams, callback4, this, "POST");
                    break;
            }
        }

我必须在代码中的其他地方声明回调函数，这使得编程逻辑很难理解，随着时间的推移和代码的增长，读取和调试会变得非常困难

---

有没有更好更有效的方法使代码更紧凑？

太简单了，只需使用匿名函数即可：

getServerData("example.com/select.php", someParams,function(arg){
    alert(arg);}
, this, "POST");

或使用承诺：

function getServerData(urlAdress, params, sender,  method){
return new Promise(function(callbackFunc){
if (method !== "GET"){method = "POST";}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        if (callbackFunc){callbackFunc(xhttp.responseText, sender);}
    }
};
if (method == "GET"){
    xhttp.open(method, urlAdress, true);
    xhttp.send();
 }
 else {
    xhttp.open(method, urlAdress, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(params);
  }
 });
}

像这样使用它：

getServerData("example.com/select.php", someParams, do_Select, this, "POST");

getServerData("example.com",someparams,this,"POST").then(console.log);

一个字：。好吧，也许两个：，来摆脱那个可怕的XHR代码。最终结果如下所示：

fetch(args)
  .then(res => res.text())
  .then(responseText => {
    // First fetch responded. Now on to the next.
    return (condition1) ? fetch(args)
         : (condition2) ? fetch(args)
         : fetch(args);
  })
  .then(res => res.text())
  .then(responseText => {
    // Second fetch, whichever one you returned, responded.
  });

---

使用承诺。您可以链接函数调用，而不是嵌套它们，这样相关的代码就可以放在一起了。为了使异步代码可读，已经编写了很多函数调用和函数调用。我将检查。。。塔克斯