javascript - 等待ajax请求完成

Question

这是一个 JavaScript 函数:

  function getValue(key) {
    var value;
    switch(_options.myType){
      case "cookie":
        value = readFromCookie(key);
        break;
      case "localStorage":
        value = readFromLocalStorage(key);
        break;
      case "db":
        //return value from the server
        // how do I wait for the result?
        $.ajax({
            type: "GET",
            url: "123",
            data: { .... },
            success: function(data){
               value = data; 
            }
        });
        break;
    }
    return value;
  };

如果发送ajax请求，我需要等待ajax请求完成。我该怎么做？

并不是说我不能在没有计算值的情况下离开该函数。这意味着我无法在 success: 处理程序中放置一个稍后返回值的函数(或者也许我不明白什么？)。因此必须在函数getValue()内计算它。

更新

P.S. 那么如何重构我的代码以便能够在 success: 处理程序中使用回调？这是代码的第二部分:

MyClass123.prototype.myMethod = function(value) {
      //..............
      var var1 = this.getValue("key1");
      if (var1 == "123") { ... }
      else { .... }
      //..............
    }
  };

Answer 1

请参阅下面的后续内容

您可以使ajax请求同步，但这通常是一个坏主意(jQuery不会支持它太久)。

相反，让 getValue 接受回调:

function getValue(key, callback) {
   switch(_options.myType){
     case "cookie":
       setTimeout(function() {
           callback(readFromCookie(key));
       }, 0);
       break;
     case "localStorage":
       setTimeout(function() {
           callback(readFromLocalStorage(key));
       }, 0);
       break;
     case "db":
       //return value from the server
       // how do I wait for the result?
       $.ajax({
           type: "GET",
           url: "123",
           data: { .... },
           success: function(data){
              callback(data);
           }
       });
       break;
   }
}

请注意，我将 setTimeout 用于 readFromCookie 和 readFromLocalStorage 回调。为什么？因为如果 getValue 可能异步返回其值，那么它应该始终这样做。使用 0 超时要求浏览器在控制权交还给浏览器后尽快执行此操作(尽管通常会限制在不少于 5-10 毫秒)。

<小时/>

在下面回复您的评论:

Have you read what I write? I said that I can't do it for some reason.

我错过了这一点，但恕我直言，你可以。它可能需要对代码进行一些重构，但是您可以而且应该这样做。这就是现代 Web 应用程序的工作方式。如果您的结构不支持它，则需要修复该结构。您可以使用async: false将请求作为临时解决方法，直到您可以正确完成为止。 (嘿，我们都经历过这样的情况，不得不做类似的事情。)请注意，它很快就会退役(只是 jQuery 对它的支持，您仍然可以直接使用 XHR 来执行同步请求)。

<小时/>

关于您更新的问题，以下是更新该代码的方法:

MyClass123.prototype.myMethod = function(value) {
  this.getState("key1", function(var1) {
    //                           ^--- Note the var becomes an arg
    if var1 == "123"{ ... }
    else { .... }
  });
};

请注意它实际上的变化是多么小。用于跟随对getState的调用的逻辑改为进入您传递给它的回调。