javascript - 代码以错误的顺序执行

Question

我知道 Javascript 是异步的，但在这种情况下我不明白为什么会发生这种情况。

在下面的第 27 行，我调用函数“GetProducer”，该函数应该返回我打算稍后使用的特定生产者的数据。然而，当它被 consoling 出来时，它变得未定义，这是因为第 28 行的代码在检索数据(第 27 行)之前执行。

为什么会发生这种情况，我该如何解决？

1.     function GetProducer(id) {
2.  
3.          $.ajaxSetup ({
4.            url: "http://localhost/api/v1/producers/" + id,
5.            type: "GET",
6.            dataType: "json",
7.            cache: false,
8.            contentType: "application/json"
9.          })
10.         $.ajax({
11.             success: function(data){
12.                 return data;
13.             },
14.             error: function(xmlHttpRequest, textStatus, errorThrown) {
15.                 console.log(xmlHttpRequest);
16.                 console.log(textStatus);
17.                 console.log(errorThrown);
18.            }
19.         }).done(function(data){
20.             console.log(data);
21.         })
22.      }
23.
24.     $('.modal-btn').click(function(){
25.         var producerId = $(this).attr('id');
26.         $('#myModalLabel').html(producerId);
27.         var info = GetProducer(producerId);
28.         console.log(info); // <--- undefined
29.     });

Answer 1

ajax 回调函数中的return 语句是无用的。该函数是异步调用的，您不能期望任何东西将您的返回值传递给任何东西。

如果您将 console.log() 调用放在“成功”回调的内部，您将看到一个值。

您可能需要更改“GetProducer”函数，使其也接受一个回调参数:

    GetProducer(producerId, function(info) { ... });

函数将大致如下所示:

  function GetProducer(producerId, callback) {
    $.ajaxSetup({
      // ... same
    });
    $.ajax({
      success: function(data) {
        callback(data);
      },
      // etc
    });
  }

因此，回调函数将是您放置处理“生产者”信息的代码的地方。异步编程就是在结果可用时提供处理结果的 API 函数。