Question

我已经构建了一个函数来检查本地存储中是否存在记录，如果没有触发ajax调用来获取数据。返回数据后，我将数据设置在本地存储中。完成此功能后，我必须将数据传递给另一个将在表单中提供数据的函数。我想知道现在实现这一目标的最佳做法是什么？我现在看到更多面向对象的JavaScript，我想知道在这种情况下是否可以应用任何OOP方法。这是我的例子：

function getData(fnName,storageID,recID){
    var inStorage = localStorage.hasOwnProperty(storageID) ? true  : false,
        frmData;

    if(inStorage) {
        frmData = JSON.parse(localStorage.getItem(storageID));
    }else{
        $.ajax({
            type: 'POST',
            url: 'AjaxFunctions.cfc?method='+fnName,
            data: {'recID':recID},
            dataType: 'json',
            async: false
        }).done(function(obj){
            if(obj.STATUS == "200"){
                var storageData = $.isEmptyObject(obj.DATA) ? null : JSON.stringify(obj.DATA);
                localStorage.setItem(storageID,storageData);
                frmData = storageData;
            }else{
                $('#error').html(obj.MESSAGE);
            }
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Error: "+errorThrown);
        });
    }
    //frmFeed(frmData);
    return frmData;
}

上面的函数一旦完成，就应该传递另一个将填充表单的函数中的数据：

function frmFeed(frmData){
    //Loop over frmData and populate the fields
}

我知道实现此目的的一种方法是简单地调用上面显示的frmFeed函数内的getData（注释代码）。有没有其他方法来调用frmFeed并传递数据？如果有人可以提供一些例子，请告诉我。谢谢！

Answer 1

有几种方法：

回调
承诺

不建议使用同步ajax请求，因为它会阻止UI。

这是使用promises的实现：

function getData(fnName,storageID,recID){
    return new Promise(function(resolve, reject) {
      var inStorage = localStorage.hasOwnProperty(storageID) ? true  : false;

      if (inStorage) {
          resolve(JSON.parse(localStorage.getItem(storageID)));
      } else {
          $.ajax({
              type: 'POST',
              url: 'AjaxFunctions.cfc?method='+fnName,
              data: { 'recID': recID },
              dataType: 'json'
              // removed sync
          }).done(function(obj){
              if(obj.STATUS == "200"){
                  var storageData = $.isEmptyObject(obj.DATA) ? null : JSON.stringify(obj.DATA);
                  localStorage.setItem(storageID,storageData);
                  resolve(storageData);
              }else{
                  $('#error').html(obj.MESSAGE);
                  // or reject here
                  reject(obj);
              }
          }).fail(function(jqXHR, textStatus, errorThrown){
              alert("Error: "+errorThrown);
              // or reject may be better here
              reject({ 'jqXHR': jqXHR, 'textStatus': textSTatus, 'errorThrown': errorThrown });
          });
      }
    });
}

getData('blah', 'storageId', 'recId')
    .then(function(frmData) {
       frmFeed(frmData);
    });

在另一个函数JavaScript / JQuery中调用函数的最佳方法是什么？

1 个答案: