javascript - 在 Ajax 中获得响应的问题

Question

我有以下代码:

  function f(){
      var value = "";
      var request1 = $.ajax({
           url : '/a',
           type: "GET"
      });
      var request2 = $.ajax({
          url: '/b', 
          type: 'GET',
      });

      $.when(request1, request2).done(function(result1, result2){

      //break point #1
      //result1 = [Object, "success", Object]
      //result2 = [Object, "success", Object]

      //do something
      })

     //break point #2
     //request1 = Object {readyState: 1}
     //request2 = Object {readyState: 1}

     return value
  }

当我在一个地方退出断点时，我得到 result1 = [Object, "success", Object] 当我在另一个地方退出时，我得到 request1 = 对象 {readyState: 1}。请参见上文。

1. 出现此问题的原因可能是什么？这是异步问题吗？
2. 我想将返回值插入到参数中。例如:a = f()。那是我应该用回调做的事情吗？我试图阅读一些关于它的文章，但还没有设法实现它，所以我想得到一些帮助。我没有太多的 JavaScript 经验，所以我还有一些难以实现的东西，比如这类东西。

Answer 1

是的，那是因为异步功能。调用返回后要执行的任何代码，无论是检查结果还是将返回值分配给变量，都应放在回调中。在 #2 断点处，您正在“跳过”异步调用，您无法控制此调用的状态。所以将所有代码放在回调中，即断点 1。

将“f”函数的结果分配给一个变量，例如var r = f()，f 取决于异步 ajax 调用，您需要将“f”函数转换为异步函数，例如通过使用 jQuery 的 Deferred 对象或使用 ES6 内置的 promise 。这样，您可以在 f resolves(即所有 ajax 请求都已解析)时分配 f 的结果。

在下面的代码片段中，我通过用异步函数替换它们来模拟 ajax 调用，将其变成一个工作片段。我也将 f 变成了一个异步函数，让它返回一个 Deferred 对象。

$(document).ready(function() {
  function f() {
    var value = $.Deferred(); //this is the result this function will return
    
    //simulate ajax call 1
    var request1 = function() {
      var result = $.Deferred();
      result.resolve("this is the result of request 1");
      //result.reject("something went wrong in request 1");
      return result;
    };
    //simulate ajax call 2
    var request2 = function() {
      var result = $.Deferred();
      result.resolve("this is the result of request 2");
      //result.reject("something went wrong in request 2");
      return result;
    };

    $.when(request1(), request2()).done(function(result1, result2) {
      alert("result 1: " + result1);
      alert("result 2: " + result2);
      value.resolve(result1 + ' ' + result2); //assuming the result of the f function is a concatenation of both requests
    }).fail(function(err) {
      alert("error occurred while executing request 1 or 2: " + err);
      value.reject(err);
    });


    return value;
  }
  
  
  //call f function. Asign result asynchronously
  $.when(f()).done(function(result) {
    //f has 'resolved'
    alert("result of f: " + result);
  }).fail(function(err) {
    alert("error while executing f: " + err);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>