如何从异步调用返回响应？

Question

如何从发出异步请求的函数 foo 返回响应/结果？

我试图从回调中返回值，并将结果分配给函数内的局部变量并返回该变量，但这些方法都没有实际返回响应 - 它们都返回 undefined或者无论变量 result 的初始值是什么。

接受回调的异步函数示例（使用 jQuery 的 ajax 函数）：

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- I tried that one as well
        }
    });

    return result; // It always returns `undefined`
}

使用 Node.js 的示例：

function foo() {
    var result;

    fs.readFile("path/to/file", function(err, data) {
        result = data;
        // return data; // <- I tried that one as well
    });

    return result; // It always returns `undefined`
}

使用 < code>then 承诺块：

function foo() {
    var result;

    fetch(url).then(function(response) {
        result = response;
        // return response; // <- I tried that one as well
    });

    return result; // It always returns `undefined`
}

Answer 1

我会用一幅看起来很可怕的手绘漫画来回答。第二张图片是代码示例中 result 为 undefined 的原因。

Answer 2

最简单的解决方案是创建一个 JavaScript 函数并为 Ajax success 回调调用它。

function callServerAsync(){
    $.ajax({
        url: '...',
        success: function(response) {

            successCallback(response);
        }
    });
}

function successCallback(responseObj){
    // Do something like read the response and show data
    alert(JSON.stringify(responseObj)); // Only applicable to a JSON response
}

function foo(callback) {

    $.ajax({
        url: '...',
        success: function(response) {
           return callback(null, response);
        }
    });
}

var result = foo(function(err, result){
          if (!err)
           console.log(result);
});

Answer 3

这里的大多数答案都为您进行单个异步操作时提供了有用的建议，但有时，当您需要对数组或其他类似列表的结构中的每个条目执行异步操作时，就会出现这种情况。这样做的诱惑是：

// WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.

示例：

// WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

不起作用的原因是，当您尝试使用结果时，来自 doSomethingAsync 的回调尚未运行。

因此，如果您有一个数组（或某种列表）并且想要对每个条目执行异步操作，您有两个选择：并行（重叠）或串行（按顺序一个接一个）执行操作。

并行

您可以启动所有这些并跟踪您期望的回调数量，然后在收到那么多回调时使用结果：

var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

示例：

var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", JSON.stringify(results)); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

（我们可以取消 expecting 并仅使用 results.length === theArray.length，但这让我们有可能 theArray 在调用未完成时发生更改...）

请注意我们如何使用 forEach 中的 index 将结果保存在 results 中 位于与其相关的条目相同的位置，即使结果到达时无序（因为异步调用不一定按照启动的顺序完成）。

但是，如果您需要从函数返回这些结果怎么办？正如其他答案所指出的，你不能；你必须让你的函数接受并调用回调（或返回

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

示例：

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

或者这里有一个返回 Promise 的版本：

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

当然，如果 doSomethingAsync 向我们传递了错误，我们会使用 reject 来拒绝当我们遇到错误时承诺。）

示例：

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

（或者，您可以为返回承诺的 doSomethingAsync 制作一个包装器，然后执行以下操作...）

如果 doSomethingAsync 为您提供Promise，您可以使用 Promise.all：

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry);
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

如果您知道 doSomethingAsync 将忽略第二个和第三个参数，则可以将其直接传递给 map （map 使用以下命令调用其回调三个参数，但大多数人只使用大多数时候是第一次）：

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

示例：

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

请注意，Promise.all 会使用您给出的所有承诺的结果数组来解析其承诺（当这些承诺全部得到解决时），或者当 第一个你给它的承诺却被它拒绝。

系列

假设您不希望操作并行？如果您想依次运行它们，则需要等待每个操作完成才能开始下一个操作。下面是一个函数的示例，该函数执行此操作并使用结果调用回调：

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

（由于我们正在连续进行工作，因此我们可以只使用 results.push(result) 因为我们知道我们不会得到乱序的结果。在上面我们可以使用 results[index] = result;，但在下面的一些示例中我们没有可用的索引。 )

示例：

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

（或者，再次为 doSomethingAsync 构建一个包装器，为您提供 Promise 并执行以下操作...）

如果 doSomethingAsync 为您提供 Promise ，如果你可以使用 ES2017+ 语法（也许使用像 Babel 这样的转译器），你可以使用 async 函数 带有 < a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" rel="noreferrer">for-of 和 await：

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

示例：

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

如果您还不能使用 ES2017+ 语法，则可以使用 “Promise reduce”模式（这比通常的 Promise reduce 更复杂，因为我们没有将结果从一个传递到下一个，而是将它们的结果收集在一个数组中）：

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

例子：

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

...使用 ES2015+ 箭头函数：

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

示例：

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

Answer 4

Angular 1

使用 AngularJS 的人可以使用承诺来处理这种情况。

这里它说，

Promise 可用于解除异步函数的嵌套，并允许将多个函数链接在一起。

您也可以在此处找到一个很好的解释。

在下面提到的文档中找到了一个示例。

  promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      // Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved
 // and its value will be the result of promiseA incremented by 1.

Angular 2 及更高版本

在 Angular 2 中，请查看以下示例，但其 建议在 Angular 2 中使用可观察。

 search(term: string) {
     return this.http
       .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
       .map((response) => response.json())
       .toPromise();
}

您可以通过这种方式使用它，

search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}

请参阅原文在这里发布。但是 TypeScript 不支持原生 ES6 Promises，如果你想使用它，你可能需要插件为此。

此外，这里是promises 规范。

Answer 5

看一下这个例子：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});

正如你所看到的，getJoke正在返回已解决的promise（当它被解决时返回res.data.value）。因此，您等到 $http.get 请求完成，然后执行 console.log(res.joke) （作为正常的异步流程）。

这是 plnkr：

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

ES6 方式（异步 - 等待）

(function(){
  async function getJoke(){
    let response = await fetch('http://api.icndb.com/jokes/random');
    let data = await response.json();
    return data.value;
  }

  getJoke().then((joke) => {
    console.log(joke);
  });
})();

Answer 6

这是许多新 JavaScript 框架中使用的双向数据绑定或存储概念非常适合您的地方之一......

所以如果您使用< a href="https://en.wikipedia.org/wiki/Angular_(web_framework)" rel="noreferrer">Angular, React，或任何其他执行双向数据绑定或存储概念的框架，这个问题已经为您解决了，所以简单来说，您的结果是 undefined 在第一阶段，所以在收到数据之前你已经得到了 result = undefined ，那么一旦你得到结果，它就会被更新并被分配给你的响应的新值Ajax 调用...

但是如何用纯 JavaScript 实现它或 jQuery 例如，正如您在这个问题中所问的那样？

您可以使用回调、promise 和最近可观察到的来为您处理它。例如，在 Promise 中，我们有一些诸如 success() 或 then() 之类的函数，这些函数将在您的数据准备就绪时执行。与可观察对象上的回调或订阅函数相同。

例如，在您使用 jQuery 的情况下，您可以执行以下操作：

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); // After we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); // fooDone has the data and console.log it
    };

    foo(); // The call happens here
});

有关更多信息，请研究 Promise 和 Observables，它们是执行异步操作的较新方法。

Answer 7

这是我们在探索 JavaScript 的“奥秘”时遇到的一个非常常见的问题。今天就让我来揭开这个谜团吧。

让我们从一个简单的 JavaScript 函数开始：

function foo(){
    // Do something
    return 'wohoo';
}

let bar = foo(); // 'bar' is 'wohoo' here

这是一个简单的同步函数调用（其中每一行代码在下一行代码之前“完成其工作”），结果与预期相同。

现在让我们添加一些扭曲，在我们的函数中引入一点延迟，以便所有代码行都不会按顺序“完成”。因此，它将模拟该函数的异步行为：

function foo(){
    setTimeout( ()=> {
        return 'wohoo';
   }, 1000)
}

let bar = foo() // 'bar' is undefined here

所以你就可以了；这种延迟破坏了我们预期的功能！但究竟发生了什么？嗯，如果你看一下代码，这实际上是非常合乎逻辑的。

函数 foo() 在执行时不返回任何内容（因此返回值为 undefined），但它确实启动了一个计时器，该计时器在 1 秒后执行一个函数以返回 '哇哦。但正如您所看到的，分配给 bar 的值是 foo() 立即返回的内容，它什么也没有，即只是 undefined。

那么，我们如何解决这个问题？

让我们向我们的函数请求一个承诺。
Promise 的真正含义是：它意味着该函数保证您提供它将来获得的任何输出。因此，让我们看看它在上面的小问题中的实际应用：

function foo(){
   return new Promise((resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){
      // Promise is RESOLVED, when the execution reaches this line of code
       resolve('wohoo') // After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar;
foo().then( res => {
    bar = res;
    console.log(bar) // Will print 'wohoo'
});

因此，总结是 - 要处理异步函数，例如基于 Ajax 的调用等，您可以使用 Promise 来解析值（其中你打算回来）。因此，简而言之，您在异步函数中解析值而不是返回。

更新（带有 async/await 的 Promises）

除了使用 then/catch 来处理 Promise 之外，还存在另一种方法。这个想法是识别异步函数，然后等待承诺解析，然后再移动到下一行代码。它仍然只是底层的承诺，但具有不同的语法方法。为了让事情更清楚，你可以在下面找到一个比较：

then/catch 版本：

function saveUsers(){
     getUsers()
      .then(users => {
         saveSomewhere(users);
      })
      .catch(err => {
          console.error(err);
       })
 }

async/await 版本：

  async function saveUsers(){
     try{
        let users = await getUsers()
        saveSomewhere(users);
     }
     catch(err){
        console.error(err);
     }
  }

Answer 8

从异步函数返回值的另一种方法是传入一个将存储异步函数结果的对象。

这是一个相同的示例：

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

我使用 result 对象在异步操作期间存储值。这使得即使在异步作业之后结果也可用。

我经常使用这种方法。我很想知道这种方法在涉及通过连续模块将结果连接回来的情况下效果如何。

Answer 9

虽然 Promise 和回调在许多情况下都工作得很好，但表达类似这样的内容是很痛苦的：

if (!name) {
  name = async1();
}
async2(name);

你最终会经历 async1;检查 name 是否未定义并相应地调用回调。

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

虽然在小示例中没问题，但当您有很多类似的情况并涉及错误处理时，就会变得烦人。

Fibers 有助于解决这个问题。

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

您可以在此处查看该项目。

Answer 10

我编写的以下示例展示了如何

• 处理异步 HTTP 调用；
• 等待每个API调用的响应；
• 使用 Promise 模式；
• 使用 Promise.all 模式加入多次 HTTP 调用；

这个工作示例是独立的。它将定义一个简单的请求对象，该对象使用窗口 XMLHttpRequest 对象进行调用。它将定义一个简单的函数来等待一堆承诺完成。

语境。该示例正在查询 Spotify Web API 端点以搜索 playlist 对象：

[
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]

对于每个项目，一个新的 Promise 将触发一个块 - ExecutionBlock，解析结果，根据结果安排一组新的 Promise数组，即 Spotify 的列表user 对象并在 ExecutionProfileBlock 中异步执行新的 HTTP 调用。

然后，您可以看到一个嵌套的 Promise 结构，它允许您生成多个完全异步的嵌套 HTTP 调用，并通过 Promise.all 连接每个调用子集的结果。

注意
最近的 Spotify search API 将要求在请求标头中指定访问令牌：

-H "Authorization: Bearer {your access token}" 

因此，要运行以下示例，您需要将访问令牌放入请求标头中：

var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  });

<div id="console" />

我已经广泛讨论了这个解决方案

Answer 11

简短的答案是，您必须实现这样的回调：

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});

Answer 12

JavaScript 是单线程的。

浏览器可以分为三个部分：

1. 事件循环

2. Web API

3. 事件队列

事件循环永远运行，即一种无限循环。事件队列是在某个事件（例如：单击）上推送所有功能的地方。

这是一个一个地从队列中执行并放入事件循环中，该事件循环执行该函数并在执行第一个函数后为下一个函数做好准备。这意味着只有在事件循环中执行队列中该函数之前的函数后，才会开始执行一个函数。

现在让我们假设我们将两个函数放入队列中。一种是从服务器获取数据，另一种是利用该数据。我们首先将 serverRequest() 函数推入队列，然后将 utiliseData() 函数推入队列。 serverRequest 函数进入事件循环并调用服务器，因为我们永远不知道从服务器获取数据需要多长时间，因此此过程预计需要时间，因此我们忙于事件循环，从而挂起页面。

这就是 Web API 发挥作用的地方。它从事件循环中获取此函数并与服务器进行处理，使事件循环空闲，以便我们可以执行队列中的下一个函数。

队列中的下一个函数是 utiliseData()，它会进入循环，但由于没有可用数据，它会被浪费，并且下一个函数的执行将继续，直到队列末尾。 （这称为异步调用，即，在获得数据之前我们可以做其他事情。）

让我们假设我们的 serverRequest() 函数在代码中有一个 return 语句。当我们从服务器Web API取回数据时，它会将其推送到队列末尾的队列中。

当它被推到队列末尾时，我们无法利用它的数据，因为我们的队列中没有任何函数可以利用这些数据。 因此不可能从异步调用中返回某些内容。

因此，解决方案是回调或承诺 。

• 来自

我们将我们的函数（利用从服务器返回的数据的函数）提供给调用服务器的函数。

function doAjax(callbackFunc, method, url) {
    var xmlHttpReq = new XMLHttpRequest();
    xmlHttpReq.open(method, url);
    xmlHttpReq.onreadystatechange = function() {

        if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
            callbackFunc(xmlHttpReq.responseText);
        }
    }
    xmlHttpReq.send(null);
}

在我的代码中，它被称为：

function loadMyJson(categoryValue){
    if(categoryValue === "veg")
        doAjax(print, "GET", "http://localhost:3004/vegetables");
    else if(categoryValue === "fruits")
        doAjax(print, "GET", "http://localhost:3004/fruits");
    else
      console.log("Data not found");
}

JavaScript.info 回调

Answer 13

2017 年答案：您现在可以在当前的每个浏览器和 Node.js 中完全执行您想要的操作

这非常简单：

• 返回 Promise
• 使用 'await'，这将告诉 JavaScript 等待将承诺解析为一个值（如 HTTP 响应）
• 添加 'async' 父函数关键字

这是代码的工作版本：

(async function(){

    var response = await superagent.get('...')
    console.log(response)

})()

await 在所有当前浏览器和 Node.js 8 中均受支持

Answer 14

您可以使用这个自定义库（使用 Promise 编写）进行远程调用。

function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}

简单使用示例：

$http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});

Answer 15

另一种解决方案是通过顺序执行器 nsynjs 执行代码。

如果底层函数是 promisified，

nsynjs 将按顺序评估所有 Promise，并将 Promise 结果放入 data 属性中：

function synchronousCode() {

    var getURL = function(url) {
        return window.fetch(url).data.text().data;
    };
    
    var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
    console.log('received bytes:',getURL(url).length);
    
};

nsynjs.run(synchronousCode,{},function(){
    console.log('synchronousCode done');
});

<script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script>

如果底层函数没有 promisified

步骤 1. 将带有回调的函数包装到 nsynjs 感知的包装器中（如果它有 promisified 版本，则可以跳过此步骤）：

var ajaxGet = function (ctx,url) {
    var res = {};
    var ex;
    $.ajax(url)
    .done(function (data) {
        res.data = data;
    })
    .fail(function(e) {
        ex = e;
    })
    .always(function() {
        ctx.resume(ex);
    });
    return res;
};
ajaxGet.nsynjsHasCallback = true;

步骤 2. 将同步逻辑放入函数中：

function process() {
    console.log('got data:', ajaxGet(nsynjsCtx, "data/file1.json").data);
}

步骤 3. 运行通过 nsynjs 以同步方式运行函数：

nsynjs.run(process,this,function () {
    console.log("synchronous function finished");
});

Nsynjs 将逐步计算所有运算符和表达式，如果某些慢速函数的结果尚未准备好，则暂停执行。

更多示例位于此处。

Answer 16

1. 第一步绊脚石

对于其他许多人来说，我遇到的异步调用一开始是令人困惑的。
我不记得细节，但我可能尝试过类似的事情：

let result;

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  success: function (response) {
    console.log('\nInside $.ajax:');
    console.log(response);
    result = response;
  },
});

console.log('Finally, the result: ' + result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

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

哎呀！
该行的输出
console.log('最后结果：' + result);
我认为会在最后打印，但在其他输出之前打印！
– 并且它不包含结果：它只是打印undefined。 ¹
怎么会？

一个有用的见解

我清楚地记得我第一次关于异步调用的顿悟 (

Answer 17

ECMAScript 6 具有“生成器”，可让您轻松地以异步方式进行编程。

function* myGenerator() {
    const callback = yield;
    let [response] = yield $.ajax("https://stackoverflow.com", {complete: callback});
    console.log("response is:", response);

    // examples of other things you can do
    yield setTimeout(callback, 1000);
    console.log("it delayed for 1000ms");
    while (response.statusText === "error") {
        [response] = yield* anotherGenerator();
    }
}

要运行上面的代码，你可以这样做：

const gen = myGenerator(); // Create generator
gen.next(); // Start it
gen.next((...args) => gen.next([...args])); // Set its callback function

如果你需要定位不支持 ES6 的浏览器，你可以通过 Babel 或closure-compiler运行代码来生成 ECMAScript 5。

回调 ...args包装在一个数组中，并在您读取它们时进行解构，以便该模式可以处理具有多个参数的回调。例如 node fs：

const [err, data] = yield fs.readFile(filePath, "utf-8", callback);

Answer 18

我们发现自己处于一个似乎沿着我们称为“时间”的维度前进的宇宙中。我们并不真正理解时间是什么，但我们已经发展了抽象概念和词汇，让我们能够推理和谈论它：“过去”，“现在”，“未来”，“之前”，“之后”。

我们构建的计算机系统越来越多地将时间作为一个重要维度。某些事情是注定要在未来发生的。在这些第一件事最终发生之后，还需要发生其他事情。这是称为“异步性”的基本概念。在我们日益网络化的世界中，最常见的异步情况是等待某些远程系统响应某些请求。

考虑一个例子。你打电话给送奶工并点了一些牛奶。当它到来时，您想将其放入咖啡中。你现在不能把牛奶加到咖啡里，因为它还没有到。您必须等待它到来才能将其放入咖啡中。换句话说，以下内容将不起作用：

var milk = order_milk();
put_in_coffee(milk);

因为 JavaScript 无法知道它需要等待order_milk 完成才能执行put_in_coffee.换句话说，它不知道 order_milk 是异步——直到将来某个时间才会产生牛奶。 JavaScript 和其他声明性语言执行一条又一条语句，无需等待。

解决此问题的经典 JavaScript 方法是利用 JavaScript 支持将函数作为可传递的第一类对象这一事实，将函数作为参数传递给异步请求，然后在异步请求完成时调用该函数它的任务是在未来的某个时候。这就是“回调”方法。它看起来像这样：

order_milk(put_in_coffee);

order_milk 启动，订购牛奶，然后，当且仅当牛奶到达时，它调用 put_in_coffee。

这种回调方法的问题在于，它污染了用 return 报告其结果的函数的正常语义；相反，函数不得通过调用作为参数给出的回调来报告其结果。此外，在处理较长的事件序列时，这种方法很快就会变得笨拙。举个例子，假设我要等牛奶放入咖啡中，然后才执行第三步，即喝咖啡。我最终需要写这样的东西：

order_milk(function(milk) { put_in_coffee(milk, drink_coffee); }

我传递给 put_in_coffee 的地方是要放入的牛奶，以及一旦牛奶要执行的操作 (drink_coffee)这样的代码变得难以编写、阅读和调试。

在这种情况下，我们可以将问题中的代码重写为：

var answer;
$.ajax('/foo.json') . done(function(response) {
  callback(response.data);
});

function callback(data) {
  console.log(data);
}

输入承诺

这是“承诺”概念的动机，“承诺”是一种特殊类型的值，代表未来或某种>异步结果。它可以代表已经发生的事情，或者将来会发生的事情，或者可能永远不会发生的事情。 Promise 有一个名为 then 的方法，您可以向该方法传递一个要在 Promise 表示的结果实现时执行的操作。

对于牛奶和咖啡，我们设计 order_milk 来返回牛奶到达的承诺，然后将 put_in_coffee 指定为 then 操作，如下所示：

order_milk() . then(put_in_coffee)

这样做的一个优点是我们可以将它们串在一起以创建未来发生的序列（“链接”）：

order_milk() . then(put_in_coffee) . then(drink_coffee)

让我们将 Promise 应用于您的特定问题。我们将把请求逻辑包装在一个函数中，该函数返回一个承诺：

function get_data() {
  return $.ajax('/foo.json');
}

实际上，我们所做的就是在对 $.ajax 的调用中添加一个 return 。这是有效的，因为 jQuery 的 $.ajax 已经返回了一种类似承诺的东西。 （实际上，在不深入细节的情况下，我们更愿意包装此调用以返回真正的承诺，或者使用 $.ajax 的替代方案来实现这一点。）现在，如果我们想要加载文件并等待其完成，然后执行某些操作，我们可以简单地说，

get_data() . then(do_something)

例如，

get_data() .
  then(function(data) { console.log(data); });

当使用 Promise 时，我们最终会将大量函数传递给 then，因此使用 more 通常会很有帮助 ：

get_data() .
  then(data => console.log(data));

紧凑的 ES6 风格的箭头函数 async 关键字

但是，对于必须以一种方式（如果同步）编写代码而如果异步则必须以完全不同的方式编写代码，仍然存在一些隐约的不满。对于同步，我们编写，

a();
b();

但如果 a 是异步的，则我们必须编写 Promise

a() . then(b);

上面，我们说，“JavaScript 无法知道它需要等待在执行第二个之前先调用完成”。如果有某种方式告诉 JavaScript 这不是很好吗？事实证明，有 --await 关键字，在称为“异步”函数的特殊类型函数中使用。此功能是即将推出的 ECMAScript (ES) 版本的一部分，但它已经在转译器中可用，例如 Babel 给出正确的预设。这使我们可以简单地写

async function morning_routine() {
  var milk   = await order_milk();
  var coffee = await put_in_coffee(milk);
  await drink(coffee);
}

在您的情况下，您可以写类似的内容

async function foo() {
  data = await get_data();
  console.log(data);
}

Answer 19

以下是处理异步请求的一些方法：

1. 浏览器 Promise 对象
2. Q - JavaScript 的 Promise 库
3. A+ Promises.js
4. jQuery 延迟
5. XMLHttpRequest API
6. 使用回调概念 - 作为第一个答案中的实现

示例：jQuery 延迟实现与...一起工作多个请求

var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init();

Answer 20

简短回答：您的 foo() 方法立即返回，而 $ajax() 调用在函数返回后异步执行。那么问题是异步调用返回后如何或在哪里存储它检索到的结果。

该线程中给出了几种解决方案。也许最简单的方法是将一个对象传递给 foo() 方法，并在异步调用完成后将结果存储在该对象的成员中。

function foo(result) {
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;   // Store the async result
        }
    });
}

var result = { response: null };   // Object to hold the async result
foo(result);                       // Returns before the async completes

请注意，对 foo() 的调用仍然不会返回任何有用的内容。但是，异步调用的结果现在将存储在 result.response 中。

Answer 21

在 foo() success 中使用 callback() 函数。
按这个方法试试吧。它简单易懂。

var lat = "";
var lon = "";

function callback(data) {
    lat = data.lat;
    lon = data.lon;
}

function getLoc() {
    var url = "http://ip-api.com/json"
    $.getJSON(url, function(data) {
        callback(data);
    });
}

getLoc();

Answer 22

使用 Promise

这个问题最完美的答案是使用 Promise。

function ajax(method, url, params) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open(method, url);
    xhr.send(params);
  });
}

用法

ajax("GET", "/test", "acrive=1").then(function(result) {
    // Code depending on result
})
.catch(function() {
    // An error occurred
});

---

但是等等...！

使用promise有问题！

为什么我们应该使用自己自定义的 Promise？

我使用这个解决方案有一段时间，直到我发现旧浏览器中存在错误：

未捕获的引用错误：未定义 Promise

因此，如果未定义，我决定为 ES3 以下 JavaScript 编译器实现我自己的 Promise 类。只需在主代码之前添加此代码，然后安全地使用 Promise！

if(typeof Promise === "undefined"){
    function _typeof(obj) { "@babel/helpers - typeof"; return 

    _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
    function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
    function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
    function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
    function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
    function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
    function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
    function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
    function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
    function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
    function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
    var Promise = /*#__PURE__*/function () {
  "use strict";

  function Promise(main) {
    _classCallCheck(this, Promise);
    this.main = main;
    this.mainExecuted = false;
    this.resolved = false;
    this.rejected = false;
    this.promiseChain = [];
    this.handleError = function () {};
    this.onResolve = this.onResolve.bind(this);
    this.onReject = this.onReject.bind(this);
  }
  _createClass(Promise, [{
    key: "then",
    value: function then(handleSuccess) {
      if (this.resolved) {
        if (!this.rejected) {
          this.args = handleSuccess(this.args);
        }
      } else {
        this.promiseChain.push(handleSuccess);
        this.main(this.onResolve, this.onReject);
        this.thenExecuted = true;
      }
      return this;
    }
  }, {
    key: "catch",
    value: function _catch(handleError) {
      this.handleError = handleError;
      if (!this.mainExecuted) {
        this.main(this.onResolve, this.onReject);
        this.thenExecuted = true;
      }
      return this;
    }
  }, {
    key: "onResolve",
    value: function onResolve() {
      var _this = this;
      this.resolved = true;
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      this.args = args;
      try {
        this.promiseChain.forEach(function (nextFunction) {
          _this.args = nextFunction.apply(void 0, _toConsumableArray(_this.args));
        });
      } catch (error) {
        this.promiseChain = [];
        this.onReject(error);
      }
    }
  }, {
    key: "onReject",
    value: function onReject(error) {
      this.rejected = true;
      this.handleError(error);
    }
  }]);
  return Promise;
}();
}

Answer 23

使用 ES2017 你应该将 this 作为函数声明。

async function foo() {
  var response = await $.ajax({url: '...'})
  return response;
}

并像这样执行它。

(async function() {
  try {
    var result = await foo()
    console.log(result)
  } catch (e) {}
})()

或者 Promise 语法。

foo().then(response => {
  console.log(response)

}).catch(error => {
  console.log(error)

})

演示上述代码的堆栈片段。

// The function declaration:
async function foo() {
  var response = await $.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos/1'
  })
  return response;
}

// Execute it like this:
(async function() {
  try {
    var result = await foo()
    console.log(result)
  } catch (e) {}
})()

// Or use Promise syntax:
foo().then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

.as-console-wrapper { max-height: 100% !important; top: 0; }

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

Answer 24

当然有很多方法，比如同步请求、promise，但根据我的经验，我认为你应该使用回调方法。 JavaScript 的异步行为是很自然的。

因此，您的代码片段可以重写为有点不同：

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            myCallback(response);
        }
    });

    return result;
}

function myCallback(response) {
    // Does something.
}

Answer 25

问题是：

如何从异步调用返回响应？

其中可以解释为：

如何使异步代码看起来同步？

解决方案是避免回调，并结合使用 Promises 和 async/await。

我想举一个 Ajax 请求的例子。

（虽然可以用 JavaScript 编写，但我更喜欢用 Python 编写，并使用 Transcrypt 就足够清楚了。）

首先让我们启用 jQuery，让 $ 可以用作 S：

__pragma__ ('alias', 'S', '
定义一个返回 Promise 的函数。 >，在本例中是 Ajax调用：
def read(url: str):
    deferred = S.Deferred()
    S.ajax({'type': "POST", 'url': url, 'data': { },
        'success': lambda d: deferred.resolve(d),
        'error': lambda e: deferred.reject(e)
    })
    return deferred.promise()

使用异步代码，就好像它是同步：
async def readALot():
    try:
        result1 = await read("url_1")
        result2 = await read("url_2")
    except Exception:
        console.warn("Reading a lot failed")

)

定义一个返回 Promise 的函数。 >，在本例中是 Ajax调用：

使用异步代码，就好像它是同步：

Answer 26

→ 有关不同示例的异步行为的更一般说明，请参阅 为什么我的变量在之后未更改我在函数内部修改它？ - 异步代码参考

→ 如果您已经了解问题，请跳到下面可能的解决方案。

问题

Ajax 代表 异步。这意味着发送请求（或者更确切地说接收响应）被从正常执行流程中删除。在您的示例中，$.ajax 立即返回，并且下一条语句 return result; 在您作为 success 回调传递的函数之前执行甚至打电话。

这里有一个类比，希望可以使同步流和异步流之间的区别更加清晰：

同步

想象一下，您给朋友打电话，请他为您查找一些东西。尽管这可能需要一段时间，但您仍然在打电话并凝视着太空，直到您的朋友给您所需的答案。

当您进行包含“正常”代码的函数调用时，也会发生同样的情况：

function findItem() {
    var item;
    while(item_not_found) {
        // search
    }
    return item;
}

var item = findItem();

// Do something with item
doSomethingElse();

尽管 findItem 可能需要很长时间才能执行，但 var item = findItem(); 之后的任何代码code> 必须等待直到函数返回结果。

异步

您出于同样的原因再次致电您的朋友。但这次你告诉他你很着急，他应该用你的手机给你回电。你挂断电话，离开家，做你计划做的事情。一旦你的朋友给你回电话，你就正在处理他给你的信息。

这正是您发出 Ajax 请求时所发生的情况。

findItem(function(item) {
    // Do something with the item
});
doSomethingElse();

不等待响应，而是立即继续执行并执行 Ajax 调用之后的语句。为了最终获得响应，您需要提供一个在收到响应后调用的函数，即回调（注意到什么了吗？回调？）。该调用之后的任何语句都会在调用回调之前执行。

---

解决方案

拥抱 JavaScript 的异步特性！虽然某些异步操作提供了同步操作（“Ajax”也是如此），但通常不鼓励使用它们，尤其是在浏览器上下文中。

你问为什么不好？

JavaScript 在浏览器的 UI 线程中运行，任何长时间运行的进程都会锁定 UI，使其无响应。另外，JavaScript的执行时间是有上限的，浏览器会询问用户是否继续执行。

所有这些都会导致非常糟糕的用户体验。用户将无法判断一切是否正常。此外，对于连接速度较慢的用户来说，效果会更差。

下面我们将介绍三种不同的解决方案，它们都是相互构建的：

• 带有 async/await 的 Promises（ES2017+，如果您使用转译器或再生器）
• 回调（在节点中流行）
• 使用 then() 进行承诺（ES2015+，如果您使用众多 Promise 库之一）

所有三个库都可以在当前浏览器和 Node 7+ 中使用。

---

ES2017+：带有 async/await

2017 年发布的 ECMAScript 版本引入了对异步函数的语法级支持。借助async和await，您可以以“同步风格”编写异步。代码仍然是异步的，但更容易阅读/理解。

async/await 构建在 Promise 之上：async 函数始终返回一个 Promise。 await “解开”一个 Promise，并且要么产生 Promise 被解析的值，要么在 Promise 被拒绝时抛出错误。

重要提示：您只能在 async 函数或 JavaScript 模块。模块外部不支持顶级 await，因此您可能必须创建异步 IIFE (立即调用函数表达式）来启动异步上下文（如果不使用模块）。

您可以阅读有关异步的更多信息 和 await 在 MDN 上。

下面是一个详细说明上面的延迟函数findItem()的示例：

// Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();

当前浏览器 和 node 版本支持 async/await。您还可以借助 regenerator （或使用 regenerator 的工具）将代码转换为 ES5，以支持较旧的环境，例如 Babel）。

---

让函数接受回调

回调是指函数 1 传递给函数 2 时。函数 2 可以在函数 1 准备好时调用它。在异步进程的上下文中，只要异步进程完成，就会调用回调。通常，结果会传递给回调。

在问题的示例中，您可以使 foo 接受回调并将其用作 success 回调。所以这就

var result = foo();
// Code that depends on 'result'

变成了

foo(function(result) {
    // Code that depends on 'result'
});

这里我们定义了“内联”函数，但你可以传递任何函数引用：

function myCallback(result) {
    // Code that depends on 'result'
}

foo(myCallback);

foo 本身定义如下：

function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}

callback 将引用我们传递给 < code>foo 当我们调用它并将其传递给 success 时。即一旦Ajax请求成功，$.ajax将调用callback并将响应传递给回调（可以通过result引用） ，因为这就是我们定义回调的方式）。

您还可以在将响应传递给回调之前对其进行处理：

function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // For example, filter the response
            callback(filtered_response);
        }
    });
}

使用回调编写代码比看起来更容易。毕竟，浏览器中的 JavaScript 很大程度上是事件驱动的（DOM 事件）。接收 Ajax 响应只不过是一个事件。
当您必须使用第三方代码时可能会出现困难，但大多数问题只需思考应用程序流程就可以解决。

---

ES2015+：使用 then() 进行承诺

< a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="noreferrer">承诺API 是 ECMAScript 6 (ES2015) 的新功能，但它具有良好的浏览器已经支持了。还有许多库实现了标准 Promises API 并提供了其他方法来简化异步函数的使用和组合（例如，蓝鸟）。

Promise 是未来值的容器。当 Promise 收到值（已解决）或取消（拒绝）时，它会通知所有想要访问该值的“侦听器”。

与普通回调相比的优点是它们允许您解耦代码并且更容易编写。

这是使用 Promise 的示例：

function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

delay()
  .then(function(v) { // `delay` returns a promise
    console.log(v); // Log the value once it is resolved
  })
  .catch(function(v) {
    // Or do something else if it is rejected
    // (it would not happen in this example, since `reject` is not called).
  });

.as-console-wrapper { max-height: 100% !important; top: 0; }

应用于 Ajax 调用时，我们可以使用这样的 Promise：

function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  });
}

ajax("https://jsonplaceholder.typicode.com/todos/1")
  .then(function(result) {
    console.log(result); // Code depending on result
  })
  .catch(function() {
    // An error occurred
  });

.as-console-wrapper { max-height: 100% !important; top: 0; }

描述 Promise 提供的所有优点超出了本答案的范围，但如果您编写新代码，则应该认真考虑它们。它们为您的代码提供了很好的抽象和分离。

有关 Promises 的更多信息：HTML5 rock - JavaScript Promises。

旁注：jQuery 的延迟对象

延迟对象 是 jQuery 的 Promise 自定义实现（在 Promise API 出现之前）标准化）。它们的行为几乎与 Promise 类似，但公开的 API 略有不同。

jQuery 的每个 Ajax 方法都已经返回一个“延迟对象”（实际上是延迟对象的承诺），您可以从函数中返回它：

function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});

旁注：承诺陷阱

请记住，承诺和延迟对象只是容器 /em> 对于未来值，它们不是值本身。例如，假设您有以下情况：

function checkPassword() {
    return $.ajax({
        url: '/password',
        data: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: 'POST',
        dataType: 'json'
    });
}

if (checkPassword()) {
    // Tell the user they're logged in
}

此代码误解了上述异步问题。具体来说，$.ajax() 在检查服务器上的“/password”页面时不会冻结代码 - 它会向服务器发送请求，并在等待时立即返回 jQuery Ajax Deferred 对象，而不是来自服务器的响应。这意味着 if 语句将始终获取此 Deferred 对象，将其视为 true，并像用户已登录一样继续进行。这不好。

但修复方法很简单：

checkPassword()
.done(function(r) {
    if (r) {
        // Tell the user they're logged in
    } else {
        // Tell the user their password was bad
    }
})
.fail(function(x) {
    // Tell the user something bad happened
});

---

不推荐：同步“Ajax”调用

正如我所提到的，某些（！）异步操作具有同步对应操作。我不提倡使用它们，但为了完整起见，以下是执行同步调用的方法：

没有 jQuery

如果直接使用 XMLHttpRequest 对象，将 false 作为第三个参数传递给 .open。

jQuery

如果您使用 jQuery，您可以将 async 选项设置为假。请注意，自 jQuery 1.8 起，此选项已被弃用。
然后，您仍然可以使用 success 回调或访问 jqXHR 对象：

function foo() {
    var jqXHR = $.ajax({
        //...
        async: false
    });
    return jqXHR.responseText;
}

如果您使用任何其他 jQuery Ajax 方法，例如 $.get、$.getJSON 等。 ，你必须改变它到 $.ajax （因为您只能将配置参数传递给 $.ajax）。

注意！ 无法发出同步 JSONP 请求。 JSONP 本质上始终是异步的（这是不考虑此选项的又一个原因）。

Answer 27

如果您没有在代码中使用 jQuery，那么这个答案适合您。

您的代码应该类似于以下内容：

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // Always ends up being 'undefined'

Felix Kling 做得很好为使用的人编写答案jQuery for AJAX，但我决定为那些不会的人提供替代方案。

（请注意，对于那些使用新的 fetch API、Angular 或 Promise 的用户，我在下面添加了另一个答案）

---

您所面临的问题

这是来自其他答案的“问题解释”的简短摘要，如果您在阅读此内容后不确定，请阅读该内容。

AJAX 中的A 代表异步。这意味着发送请求（或者更确切地说接收响应）被从正常执行流程中删除。在您的示例中， .send 立即返回，并且在调用作为 success 回调传递的函数之前执行下一条语句 return result;。

这意味着当您返回时，您定义的侦听器尚未执行，这意味着您返回的值尚未定义。

这是一个简单的类比：

function getFive(){
    var a;
    setTimeout(function(){
         a=5;
    },10);
    return a;
}

(Fiddle)

返回的 a 值为 undefined 因为 a=5 部分尚未执行。 AJAX 的行为是这样的，您在服务器有机会告诉浏览器该值是什么之前就返回了该值。

此问题的一种可能的解决方案是重新主动编写代码，告诉您的程序计算完成后要做什么。

function onComplete(a){ // When the code completes, do this
    alert(a);
}

function getFive(whenDone){
    var a;
    setTimeout(function(){
         a=5;
         whenDone(a);
    },10);
}

这称为CPS。基本上，我们向 getFive 传递一个要在完成时执行的操作，我们告诉我们的代码如何在事件完成时做出反应（例如我们的 AJAX 调用，或者在本例中是超时）。

用法是：

getFive(onComplete);

应该在屏幕上提醒“5”。 （小提琴）。

可能的解决方案

基本上有两种方法可以解决此问题：

1. 使 AJAX 调用同步（我们称之为 SJAX）。
2. 重构您的代码以与回调一起正常工作。

1. 同步 AJAX - 不要这样做！

至于同步 AJAX，不要这样做！Felix 的回答提出了一些令人信服的论据，说明为什么这是一个坏主意。总而言之，它会冻结用户的浏览器，直到服务器返回响应并造成非常糟糕的用户体验。以下是来自 MDN 的另一个简短总结，说明原因：

XMLHttpRequest 支持同步和异步通信。但一般来说，出于性能原因，异步请求应优先于同步请求。

简而言之，同步请求会阻止代码的执行... ...这可能会导致严重的问题...

如果您必须这样做，您可以传递一个标志。 具体方法如下：

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
  console.log(request.responseText);
}

2. 重构代码

让你的函数接受回调。在示例代码中，可以使 foo 接受回调。我们将告诉代码当 foo 完成时如何反应。

所以：

var result = foo();
// Code that depends on `result` goes here

变成：

foo(function(result) {
    // Code that depends on `result`
});

这里我们传递了一个匿名函数，但我们可以轻松地传递对现有函数的引用，使其看起来像：

function myHandler(result) {
    // Code that depends on `result`
}
foo(myHandler);

有关如何完成这种回调设计的更多详细信息，请查看 Felix 的答案。

现在，让我们定义 foo 本身以进行相应的操作

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // When the request is loaded
       callback(httpRequest.responseText);// We're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}

(fiddle)

我们现在已经制作了我们的 foo 函数接受 AJAX 成功完成时运行的操作。我们可以通过检查响应状态是否不是 200 并采取相应措施（创建失败处理程序等）来进一步扩展此功能。它有效地解决了我们的问题。

如果您仍然很难理解这一点，阅读 AJAX 入门指南< /a> 在 MDN。

Answer 28

XMLHttpRequest 2（首先，阅读本杰明·格伦鲍姆和Felix Kling）

如果您不使用 jQuery 并且想要一个可以在现代浏览器和移动浏览器中工作的简短 XMLHttpRequest 2，我建议这样使用它：

function ajax(a, b, c){ // URL, callback, just a placeholder
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}

如您所见：

1. 它比列出的所有其他函数都短。
2. 回调是直接设置的（因此没有额外的不必要的闭包）。
3. 它使用新的 onload （因此您不必检查readystate && 状态）
4. 还有一些其他情况（我不记得了）使 XMLHttpRequest 1 很烦人。

有两种方法可以获得此 Ajax 调用的响应（三种使用 XMLHttpRequest 变量名称）：

最简单的：

this.response

或者如果由于某种原因您将回调绑定到类：

e.target.response

示例：

function callback(e){
  console.log(this.response);
}
ajax('URL', callback);

或者 (上面的更好，匿名函数总是一个问题）：

ajax('URL', function(e){console.log(this.response)});

没有比这更容易的了。

现在有些人可能会说最好使用 onreadystatechange 甚至 XMLHttpRequest 变量名。那是错误的。

查看XMLHttpRequest 高级功能。

它支持所有*现代浏览器。我可以确认，自从 XMLHttpRequest 2 创建以来我一直在使用这种方法。我在使用的任何浏览器中从未遇到过任何类型的问题。

onreadystatechange 仅在您想获取状态 2 上的标头时有用。

使用 XMLHttpRequest 变量名是另一个大错误，因为您需要在 onload/oreadystatechange 闭包内执行回调，否则您会丢失它。

---

现在，如果您想要使用 POST 和 FormData 进行更复杂的操作，您可以轻松扩展此函数：

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}

再次...这是一个非常短的函数，但它确实 GET 和 POST。

使用示例：

x(url, callback); // By default it's GET so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set POST data

或传递完整的表单元素 (document.getElementsByTagName('form')[0])：

var fd = new FormData(form);
x(url, callback, 'post', fd);

或设置一些自定义值：

var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);

如您所见，我没有实现同步..这是一件坏事。

话虽如此……为什么我们不采取简单的方法呢？

---

正如评论中提到的，使用 error &&同步确实完全打破了答案的要点。哪一个是正确使用 Ajax 的好简短方法？

错误处理程序

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.onerror = error;
  c.send(d||null)
}

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}
function displayAjax(e){
  console.log(e, this);
}
x('WRONGURL', displayAjax);

在上面的脚本中，您有一个静态定义的错误处理程序，因此它不会影响功能。错误处理程序也可用于其他功能。

但要消除错误，唯一方法是编写错误的 URL，在这种情况下，每个浏览器都会抛出错误。

如果您设置自定义标头、将响应类型设置为 blob 数组缓冲区或其他任何内容，错误处理程序可能会很有用...

即使您传递“POSTAPAPAP”作为方法，它也不会抛出错误。

即使您将“fdggdgilfdghfldj”作为表单数据传递，它也不会抛出错误。

在第一种情况下，错误位于 this.statusText 下的 displayAjax() 内，为 Method not allowed。

在第二种情况下，它确实有效。您必须检查服务器端是否传递了正确的发布数据。

不允许跨域会自动抛出错误。

在错误响应中，没有任何错误代码。

只有 this.type 设置为 error。

如果您无法控制错误，为什么还要添加错误处理程序？
大多数错误都在回调函数 displayAjax() 中返回。

因此：如果您能够正确复制并粘贴 URL，则无需进行错误检查。 ;)

PS：作为第一个测试，我编写了 x('x', displayAjax)...，它完全得到了响应...???于是我检查了HTML所在的文件夹，发现有一个名为“x.xml”的文件。因此，即使您忘记了文件的扩展名，XMLHttpRequest 2 也会找到它。。我哈哈

---

同步读取文件

不要这样做。

如果你想阻止浏览器一段时间，请加载一个漂亮的大.txt 文件同步。

function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; // Or c.response
}

现在你可以做

 var res = omg('thisIsGonnaBlockThePage.txt');

没有其他方法可以以非异步方式做到这一点。 （是的，使用 setTimeout 循环...但是认真的吗？）

另一点是...如果您使用 API 或只是您自己的列表文件或任何您总是为每个请求使用不同函数的内容...

仅当您有一个页面时您始终加载相同的 XML/JSON 或任何您只需要一个函数的内容。在这种情况下，请稍微修改 Ajax 函数并将 b 替换为您的特殊函数。

---

以上功能仅供基本使用。

如果您想扩展该功能...

是的，您可以。

我使用了很多 API，我集成到每个 HTML 页面中的第一个函数是这个答案中的第一个 Ajax 函数，仅使用 GET...

但是您可以使用 XMLHttpRequest 2 做很多事情：

我做了一个下载管理器（使用简历、文件阅读器和文件系统两侧的范围）、使用画布的各种图像缩放转换器、使用 base64 图像填充 Web SQL 数据库等等......

但在这些情况下，您应该仅为此目的创建一个函数。 ..有时你需要一个 blob 或数组缓冲区，您可以设置标头、覆盖 mimetype 以及更多...

但这里的问题是如何返回 Ajax 响应...（我添加了一个简单的方法。）

Answer 29

如果您使用承诺，那么这个答案适合您。

这意味着 AngularJS、jQuery（延迟）、原生 XHR 的替代品（获取）、Ember.js，Backbone.js 的保存或任何 Node.js 返回承诺的库。

您的代码应该类似于以下内容：

function foo() {
    var data;
    // Or $.get(...).then, or request(...).then, or query(...).then
    fetch("/echo/json").then(function(response){
        data = response.json();
    });
    return data;
}

var result = foo(); // 'result' is always undefined no matter what.

Felix Kling 做得很好，为使用带有 Ajax 回调的 jQuery 的人们编写了答案。我有一个关于原生 XHR 的答案。这个答案适用于前端或后端的承诺的通用用法。

---

核心问题

浏览器和 Node.js/io.js 服务器中的 JavaScript 并发模型是异步和反应式。

每当您调用返回 Promise 的方法时，then 处理程序总是异步执行 - 也就是说，在它们下面的代码之后在 .then 处理程序中。

这意味着当您返回 data 时，您定义的 then 处理程序尚未执行。这又意味着您返回的值尚未及时设置为正确的值。

对于这个问题，有一个简单的类比：

    function getFive(){
        var data;
        setTimeout(function(){ // Set a timer for one second in the future
           data = 5; // After a second, do this
        }, 1000);
        return data;
    }
    document.body.innerHTML = getFive(); // `undefined` here and not 5

由于 data = 5 部分尚未执行，因此 data 的值为 undefined。它可能会在一秒钟内执行，但到那时它与返回值无关。

由于操作尚未发生（Ajax、服务器调用、I/O 和计时器），您将在请求有机会告诉代码该值是什么之前返回该值。

解决此问题的一种可能的解决方案是重新主动编写代码，告诉您的程序计算完成后要做什么。 Promise 通过本质上是暂时的（时间敏感的）来积极实现这一点。

快速回顾一下 Promise

Promise 是随着时间的推移而产生的价值。承诺有状态。它们开始时处于未决状态，没有任何价值，并且可以达到：

• 已完成，这意味着计算已成功完成。
• 拒绝表示计算失败。

Promise 只能改变状态一次，之后它将永远保持相同的状态。您可以将 then 处理程序附加到 Promise 以提取其值并处理错误。 then 处理程序允许链接调用。 Promise 是通过使用返回它们的 API 创建的。例如，更现代的 Ajax 替代 fetch 或 jQuery 的 $.get 返回承诺。

当我们对 Promise 调用 .then 并从中返回一些内容时，我们会得到一个关于处理后的值的 Promise。如果我们再次兑现承诺，我们会得到令人惊奇的东西，但我们还是先放马吧。

使用 Promise

让我们看看如何使用 Promise 来解决上述问题。首先，让我们使用 Promise 构造函数 用于创建延迟函数：

function delay(ms){ // Takes amount of milliseconds
    // Returns a new promise
    return new Promise(function(resolve, reject){
        setTimeout(function(){ // When the time is up,
            resolve(); // change the promise to the fulfilled state
        }, ms);
    });
}

现在，在我们 转换setTimeout来使用promise，我们可以使用 < code>then 使其计数：

function delay(ms){ // Takes amount of milliseconds
  // Returns a new promise
  return new Promise(function(resolve, reject){
    setTimeout(function(){ // When the time is up,
      resolve(); // change the promise to the fulfilled state
    }, ms);
  });
}

function getFive(){
  // We're RETURNING the promise. Remember, a promise is a wrapper over our value
  return delay(100).then(function(){ // When the promise is ready,
      return 5; // return the value 5. Promises are all about return values
  })
}
// We _have_ to wrap it like this in the call site, and we can't access the plain value
getFive().then(function(five){
   document.body.innerHTML = five;
});

基本上，我们不是返回一个由于并发模型而无法执行的值，而是返回一个可以解包<的值的包装器 /em> 与 then。它就像一个可以用 then 打开的盒子。

应用这个

这对于你原来的 API 调用来说是一样的，你可以：

function foo() {
    // RETURN the promise
    return fetch("/echo/json").then(function(response){
        return response.json(); // Process it inside the `then`
    });
}

foo().then(function(response){
    // Access the value inside the `then`
})

所以这也同样有效。我们已经了解到，我们无法从异步调用中返回值，但我们可以使用 Promise 并将它们链接起来来执行处理。我们现在知道如何从异步调用返回响应。

ES2015 (ES6)

ES6 引入了生成器，是可以在中间返回然后恢复到原来位置的函数。这通常对序列有用，例如：

function* foo(){ // Notice the star. This is ES6, so new browsers, Nodes.js, and io.js only
    yield 1;
    yield 2;
    while(true) yield 3;
}

是一个在序列 1,2,3,3,3,3,.... 上返回迭代器的函数可以迭代。虽然这本身很有趣并且为很多可能性提供了空间，但有一个特别有趣的案例。

如果我们生成的序列是一系列操作而不是数字 - 我们可以在生成操作时暂停该函数，并在恢复该函数之前等待它。因此，我们需要的不是一系列数字，而是一系列未来值 - 即：承诺。

这是一个有点棘手但非常强大的技巧，让我们以同步方式编写异步代码。有几个“跑步者”可以为您执行此操作。编写一个代码只需短短几行代码，但这超出了本答案的范围。我将在这里使用 Bluebird 的 Promise.coroutine，但还有其他包装器，例如 co 或 Q.async。

var foo = coroutine(function*(){
    var data = yield fetch("/echo/json"); // Notice the yield
    // The code here only executes _after_ the request is done
    return data.json(); // 'data' is defined
});

该方法本身返回一个承诺，我们可以从其他协程中使用它。例如：

var main = coroutine(function*(){
   var bar = yield foo(); // Wait our earlier coroutine. It returns a promise
   // The server call is done here, and the code below executes when done
   var baz = yield fetch("/api/users/" + bar.userid); // Depends on foo's result
   console.log(baz); // Runs after both requests are done
});
main();

ES2016（ES7）

在ES7中，这进一步标准化。目前有几个提案，但在所有提案中您都可以await承诺。这只是上述 ES6 提案的“糖”（更好的语法），添加了 async 和 await 关键字。以上面的例子为例：

async function foo(){
    var data = await fetch("/echo/json"); // Notice the await
    // code here only executes _after_ the request is done
    return data.json(); // 'data' is defined
}

它仍然返回一个相同的承诺:)

Answer 30

您错误地使用了 Ajax。我们的想法是不让它返回任何内容，而是将数据交给回调函数来处理数据。

也就是说：

function handleData( responseData ) {

    // Do what you want with the data
    console.log(responseData);
}

$.ajax({
    url: "hi.php",
    ...
    success: function ( data, status, XHR ) {
        handleData(data);
    }
});

在提交处理程序中返回任何内容都不会执行任何操作。您必须要么移交数据，要么直接在 success 函数内对其执行您想要的操作。