Question

在使用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");

问题：

但是当我的do_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;
            }
        }

我必须在代码的其他地方声明回调函数，这使得编程逻辑很难理解读取和调试的时间和代码的增长。

是否有更好，更有效的方法使代码更紧凑？

Answer 1

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

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",someparams,this,"POST").then(console.log);

Answer 2

一个字：Promises。好吧，也许两个：fetch，摆脱那个可怕的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.
  });

如何使用AJAX破解您的代码？

2 个答案: