javascript - 我可以写一个JS函数: returns as a normal function would or wait and return AJAX results?

Question

目前，我有一个函数 getData，它对某些数据进行 AJAX 调用，将其存储在 localStorage 中，然后调用回调。如果数据已在 localStorage 中，则 getData 将仅调用回调。

// A wrapper around localStorage.
var storage = new Storage();

function getData(callback){
    var KEY = 'key';
    var data = storage.get(KEY);

    if (data){
        callback(data);
    } else {
        Utils.ajaxPost({
            ...,
            success: function(data){
                storage.set(KEY, data);
                callback(data);
            }
        });
    }
}

// I use getData like this.
getData(function(data){
    // do something with data
});

我想知道是否有一种方法可以编写 getData 函数(可能带有延迟/ promise /闭包)，以便我可以像这样使用它:

var data = getData();
// do something with data

Answer 1

由于AJAX的异步特性，不可能写成:

function getData(){
  var result;
  $.ajax({
    url: 'script.php',
    type: 'POST',
    dataType: 'html',
    cache: false,
    succes: function(data){
      result = data;
    }
  });
  return result;
}

var data = getData();
console.log(data);  //undefined

这将导致数据未定义，因为该函数将在对服务器的请求完成之前返回。

您可以通过设置async: false来解决这个问题，但这通常被认为是一个坏主意，因为它会卡住浏览器直到收到响应。

function getData(){
  var result;
  $.ajax({
    url: 'submit.php',
    type: 'POST',
    dataType: 'html',
    async: false,
    success: function(data){
      result = data;
    }
  });
  return result;
}

var data = getData();
console.log(data); // Server's response

更好的想法是使用回调(您似乎已经在这样做)

getData(function(data){
    // do something with data
});

或 promise :

function getData(){
  return $.ajax({
    url: 'submit.php',
    type: 'POST',
    dataType: 'html'
  });
}

var data = getData()
.success(function(data){
  console.log(data);
})
.fail(function(){
  console.log("Error!");
});

Promise 是处理多个回调和解耦代码的一个很好的解决方案。

要使其在您的情况下工作，您必须稍微更改代码以使 if 语句的第一部分也返回一个 promise :

function getData(key){
  var data = localStorage.getItem(key);

  if (data){
    return $.Deferred().resolve(data);
  } else {
    return $.ajax({
      url: 'submit.php',
      type: 'POST',
      dataType: 'html',
      cache: false
    });
  }
}

var data = getData("key").done(function(data){
  localStorage.setItem("key", data);
  console.log(data)
});

不过，我不确定这样做有多大意义。

摘要:您可以执行您所要求的操作，但只能使用 async: false，这通常被认为是一个坏主意。方法如下:

function getData(){
  var KEY = 'key',
      data = localStorage.getItem(KEY),
      retVal;

  if (data){
    retVal = data;
  } else {
    $.ajax({
      url: 'submit.php',
      type: 'POST',
      dataType: 'html',
      async: false,
      success: function(data){
        retVal = data;
        localStorage.setItem(KEY, data);
      }
    });
  }

  return retVal;
}

var data = getData();
console.log(data);

非常有用的引用:How do I return the response from an asynchronous call?