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

Question

I have built function that checks if record exist in local storage, if not trigger ajax call to get the data. Once data is returned I set the data in local storage. After this function completes I have to pass the data to another function that will feed the data in the form. I'm wondering what is the best practice now days to achieve this? I see more object oriented JavaScript now days and I'm wondering if any of OOP methods can be applied in this case. Here is example of my fucntion:

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 above once completed should pass the data in another function that will populate the form:

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

I know the one way to accomplish this is to simply call frmFeed inside getData function that I showed above (commented code). is there any other way to call frmFeed and pass the data? If anyone can provide some example please let me know. Thank you!

Answer 1

There are several ways:

1. Callbacks
2. Promises

Not recommended would be to use synchronous ajax requests because it will block the UI.

Here's an implementation using 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);
    });