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

Question

我有一个foo发出Ajax请求的函数。我怎样才能从中回复foo？我尝试从success回调中返回值，并将响应分配给函数内部的局部变量并返回该变量，但这些方法都没有实际返回响应。function foo() {     var result;     $.ajax({         url: '...',         success: function(response) {             result = response;             // return response; // <- I tried that one as well         }     });     return result;}var result = foo(); // It always ends up being `undefined`.

Answer 1

如果您没有在代码中使用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的人写了一个很好的答案，我决定为那些没有使用jQuery的人提供替代方案。

你面对的是什么

这是另一个答案的“问题解释”的简短摘要，如果您在阅读本文后不确定，请阅读。

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

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

这是一个简单的比喻

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

（小提琴）

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，不要这样做！费利克斯的回答提出了一些令人信服的论据，说明为什么这是一个坏主意。总而言之，它会冻结用户的浏览器，直到服务器返回响应并创建非常糟糕的用户体验。以下是MDN对于其原因的另一个简短摘要：

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

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

如果你必须这样做，你可以传递一个标志：这是如何：

var request = new XMLHttpRequest();request.open('GET', 'yourURL', false);  
// `false` makes the request synchronousrequest.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();}

（小提琴）

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

如果您仍然很难理解这一点，请阅读 MDN 的AJAX入门指南。

Answer 2

XMLHttpRequest 2（首先阅读 Benjamin Gruenbaum和 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 && status）

4. 还有其他一些我不记得的情况会让XMLHttpRequest 1变得烦人。

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

最简单的：

this.response

或者，如果由于某种原因你bind()回调到一个类：

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)}

再一次......这是一个非常短的功能，但它确实得到和发布。

用法示例：

x(url, callback); // By default it's get so no need to setx(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 && synchronous确实完全打破了答案的要点。哪个是以正确方式使用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，在这种情况下每个浏览器都会抛出一个错误。

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

即使你传递'POSTAPAPAP'作为方法它也不会抛出错误。

即使你将'fdggdgilfdghfldj'作为formdata传递它也不会抛出错误。

在第一种情况下，错误在displayAjax()under this.statusTextas中Method not Allowed。

在第二种情况下，它只是起作用。如果您传递了正确的帖子数据，则必须在服务器端进行检查。

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

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

只有this.type哪个被设置为错误。

如果您完全无法控制错误，为什么要添加错误处理程序？大多数错误都在回调函数中返回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做很多事情：

我创建了一个下载管理器（使用范围，包括简历，文件读取器，文件系统），使用画布的各种图像调整器转换器，使用base64images填充Web SQL数据库等等......但在这些情况下，您应该只创建一个函数目的...有时你需要一个blob，数组缓冲区，你可以设置标题，覆盖mimetype，还有更多......

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

Answer 3

您正在使用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);
    }});

在提交处理程序中返回任何内容都不会执行任何操作。您必须切换数据，或者直接在成功函数内执行您想要的操作。

Answer 4

最简单的解决方案是创建一个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 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);    });