Question

我一直在用php＆mysql＆jquery＆bootstrap编写许多Web应用程序，现在该解决这个问题了。如何编写较短的ajax查询（发布）？如果我想编写有效且能解决许多问题的代码，那么每个ajax调用的时间都太长了。有没有更好的方法或某种库/包装程序可以使代码SHORTER和FASTER编写，但至少使所有这些东西

我看上去很流行axios，但情况似乎更糟

//JUST an example code, too complicated
var $btnStatusElem = $("#passwordreset").button('loading');
$.ajax({
    type: "POST",
    cache: false,
    url: "pwreset.php",
    data: postdata
    success: function(data) {
        $btnStatusElem.button('reset');
        try {
            var datajson = JSON.parse(data);
        }
        catch (e) {
            alert('Unexpected server error');
            return false;
        };

        if (datajson['success'] == true) {
            //do the OK stuff 
        } else {
            //show the error code, and stuff
            return false;
        }

},//success
error: function(msg) {
    alert('ERROR');
    $('#passwordreset_result').html(msg);
}
});

对于我的代码，ajax查询，我希望它执行以下步骤： 1.发布时禁用“提交”按钮（15秒后也重新启用，而不仅仅是在页面刷新之前保持禁用状态） 2.发送json，希望json返回 3.如果服务器有错误，则不返回json而是错误。然后，如果我不使用try ... catch，代码将停止所有js执行。每次都很难写 4.如果服务器返回验证错误或其他预期错误，我必须检测到此错误并显示给用户 5.一切正常，做点事情

Answer 1

与任何重构一样，标识并隔离重复代码并传递唯一位。例如，在这种情况下，您可以将ajax调用和json解析隔离到一个函数中，然后传入url，数据等。

该函数可能会返回一个promise，可以根据需要进行解析/拒绝。

鉴于下面的doRequest函数（伪代码，未经测试，可能需要进行一些微调才能在现实世界中使用），然后您可以在所有地方使用它，而只需较少的击键：

doRequest('pwreset.php', postdata, button)
  .then(result => {
    // do something with the result
  })
  .catch(error => {
    // deal with the error
  });

或

try {
  const result = await doRequest('pwreset.php', postdata);
  // do something with result
}
catch (e) {
  // handle error
}

所有样板文件都隔离在doRequest中。

async function doRequest(url, data, button, type = "POST") {
  return new Promise((fulfill, reject) => {
    $.ajax({
      type,
      url,
      data,
      cache: false,
      success: function(data) {
        $btnStatusElem.button('reset');
        try {
          const datajson = JSON.parse(data);
        } catch (e) {
          return reject(e);
        };

        return datajson['success'] == true ?
          fulfill(datajson) :
          reject(datajson);
      }, //success
      error: function(msg) {
        return reject(msg);
      }
    });
  })
}

与@mister-jojo says一样，您可能还需要考虑使用[fetch api]而不是jQuery，但是适用相同的原理。

编写ajax查询的更紧凑的方法

1 个答案: