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

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

→有关不同示例的异步行为的更一般说明，请参阅Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

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

The problem

Ajax中的A代表asynchronous。这意味着发送请求（或者更确切地说是接收响应）将从正常执行流程中取出。在您的示例中，$.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();之后的任何代码都必须等到函数返回结果。

异步

你出于同样的原因再次打电话给你的朋友。但是这次你告诉他你很匆忙，他应该用手机给你回电话。你挂断了，离开了房子，做了你打算做的事情。一旦你的朋友给你回电话，你正在处理他给你的信息。

这正是您执行Ajax请求时发生的情况。

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

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

Solution(s)

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

你问为什么这么糟糕？

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

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

在下文中，我们将看到三个不同的解决方案，它们都是相互叠加的：

与async/await的承诺（ES2017 +，如果您使用转换器或再生器，可在旧版浏览器中使用）
回调（在节点中很流行）
与then()的承诺（ES2015 +，如果您使用众多承诺库中的一个，可在旧版浏览器中使用）

这三个都在当前浏览器和节点7+中可用。

ES2017 +：与`async/await`的承诺

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

async/await建立在承诺之上：async函数总是返回一个承诺。 await“解开”一个承诺，或者导致承诺被解决的价值，或者如果承诺被拒绝则抛出错误。

重要提示：您只能在await函数中使用async。目前，尚未支持顶级await，因此您可能需要创建一个异步IIFE（Immediately Invoked Function Expression）来启动async上下文。

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

这是一个建立在上面延迟之上的例子：

// 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 await 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);
})();

目前的browser和node版本支持async/await。您还可以通过regenerator（或使用再生器的工具，例如Babel）将代码转换为ES5来支持旧环境。

让函数接受回调

回调只是传递给另一个函数的函数。其他函数可以在函数准备就绪时调用函数。在异步进程的上下文中，只要异步进程完成，就会调用回调。通常，结果将传递给回调。

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

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

变

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

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

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

foo(myCallback);

foo本身定义如下：

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

当我们调用它时，callback将引用我们传递给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()的承诺

Promise API是ECMAScript 6（ES2015）的新功能，但它已经具有良好的browser support。还有许多库实现了标准的Promises API，并提供了其他方法来简化异步函数的使用和组合（例如bluebird）。

承诺是未来价值观的容器。当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).
  });

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

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("/echo/json")
  .then(function(result) {
    // Code depending on result
  })
  .catch(function() {
    // An error occurred
  });

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

有关承诺的更多信息：HTML5 rocks - JavaScript Promises

Side note: jQuery's deferred objects

Deferred objects是jQuery的promises自定义实现（在Promise API标准化之前）。它们的行为几乎与承诺相似，但暴露出略微不同的API。

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

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

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

Side note: Promise gotchas

请记住，promises和deferred对象只是未来值的容器，它们本身并不是值。例如，假设您有以下内容：

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”调用

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

Without jQuery

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

jQuery

如果你使用jQuery，你可以将async选项设置为false。请注意，自jQuery 1.8以来不推荐使用此选项。然后你可以使用success回调或访问responseText的jqXHR object属性：

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

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

当心！无法进行同步JSONP请求。 JSONP本质上总是异步的（甚至不考虑这个选项的另一个原因）。

Answer 2

看看这个例子：

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

正如你所看到的，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时得到解决）。所以你要等到$ http.get请求完成后再执行console.log（res.joke）（作为普通的异步流程）。

这是plnkr：

res.data.value

ES6方式（异步 - 等待）

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

Answer 3

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

这是一个相同的例子：

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

我正在使用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'); });对象在异步操作期间存储该值。这使得即使在异步作业之后结果也可用。

我经常使用这种方法。我很想知道这种方法在通过连续模块连接结果的过程中有多好。

Answer 4

这是在许多新的JavaScript框架中使用的两种方式数据绑定对你来说很有用的地方之一......

因此，如果你正在使用Angular，React或任何其他框架，这两种方式有两种方式数据绑定或存储概念，这个问题只是为你修复，所以简单来说，你的结果是在第一阶段的result，所以你有undefined在你之前接收数据，然后一旦得到结果，它将被更新并被分配给您的Ajax调用响应的新值...

但是你如何在纯javascript或jQuery中做到这一点，例如你在这个问题中提到的？

您可以使用回调，promise和最近的observable来为您处理它，例如在promise中我们有一些函数，如success（）或then（），它们将在您的数据准备就绪时执行，与回调或订阅函数相同在可观察的。

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

result = undefined

有关promises和observables的更多信息，这些是更新的方法来执行此异步操作。

Answer 5

虽然承诺和回调在许多情况下都能很好地发挥作用，但后面的表达方式却很难：

$(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(); //call happens here
});

你最终会通过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 6

77
投票

简而言之，你必须实现这样的回调：

here

Answer 7

我写的以下示例显示了如何操作

处理异步HTTP调用;
等待每个API调用的响应;
使用function callback(response) { // Here you can do what ever you want with the response object. console.log(response); } $.ajax({ url: "...", success: callback });模式;
使用Promise模式加入多个HTTP调用;

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

语境。示例是查询XMLHttpRequest端点，以便为给定的查询字符串集搜索Spotify Web API对象：

playlist

对于每个项目，新的Promise将触发一个块 - [ "search?type=playlist&q=%22doom%20metal%22", "search?type=playlist&q=Adele" ]，解析结果，根据结果数组安排一组新的promises，即Spotify ExecutionBlock对象列表，并在user中异步执行新的HTTP调用。

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

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

search

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

-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 8

2017 answer: you can now do exactly what you want in every current browser and node

这很简单：

回报承诺
使用here，它将告诉JavaScript等待将其解析为值的承诺（如HTTP响应）
将'await'关键字添加到父函数

这是您的代码的工作版本：

'async'

(async function(){ var response = await superagent.get('...') console.log(response) })()

Answer 9

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

await is supported in all current browsers and node 8

简单用法示例：

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

Answer 10

Js是单线程的。

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

1）事件循环

2）Web API

3）事件队列

Event Loop永远运行，即无限循环.Event Queue是在某些事件上推送所有函数的地方（例如：click）这是逐个执行队列并放入Event循环执行此函数并准备自己执行第一个函数之后的下一个函数。这意味着在事件循环中执行队列之前的函数之前，不会启动一个函数的执行。

现在让我们认为我们在队列中推送了两个函数，一个用于从服务器获取数据，另一个用于利用该数据。我们先将队列中的serverRequest（）函数推送到utiliseData（）函数。 serverRequest函数进入事件循环并调用服务器，因为我们永远不知道从服务器获取数据需要多长时间，所以这个过程需要花费时间，所以我们忙着我们的事件循环因此挂起我们的页面，那就是Web API发挥作用它从事件循环中获取此函数并处理服务器使事件循环空闲，以便我们可以从队列执行下一个函数。队列中的下一个函数是utiliseData（），它循环但由于没有数据可用它浪费和下一个函数的执行一直持续到队列结束。（这称为异步调用，即我们可以做其他事情，直到我们得到数据）

假设我们的serverRequest（）函数在代码中有一个return语句，当我们从服务器获取数据时，Web API将在队列末尾将其推送到队列中。由于它在队列末尾被推送，我们无法利用它的数据，因为我们的队列中没有剩余的功能来利用这些数据。因此无法从异步调用中返回一些内容。

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

来自其中一个答案的图像，正确解释回调使用...我们将功能（利用服务器返回的数据的功能）提供给功能调用服务器。

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

在我的代码中，它被称为

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

}

请阅读此处了解ECMA（2016/17）中用于进行异步呼叫的新方法（@Felix Kling在顶部回答）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"); }

Answer 11

另一种解决方案是通过顺序执行器https://stackoverflow.com/a/14220323/7579856执行代码。

如果潜在的功能被宣传

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

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

如果基础功能没有被承诺

步骤1.使用回调函数将函数包装到nsynjs-aware包装器中（如果它具有promisified版本，则可以跳过此步骤）：

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

步骤2.将同步逻辑放入功能：

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;

步骤3.通过nsynjs以同步方式运行功能：

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

Nsynjs将逐步评估所有运算符和表达式，暂停执行，以防某些慢速函数的结果未准备就绪。

更多例子：nsynjs.run(process,this,function () { console.log("synchronous function finished"); });

Answer 12

If you're not using jQuery in your code, this answer is for you

你的代码应该是这样的：

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的人提供替代方案。

（Qazxswpoi）

What you're facing

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

AJAX中的A代表异步。这意味着发送请求（或者更确切地说是接收响应）将从正常执行流程中取出。在您的示例中，Note, for those using the new fetch API, Angular or promises I've added another answer below立即返回，并且在您传递的函数之前执行下一个语句.send，因为甚至调用了return result;回调。

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

这是一个简单的比喻

success

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

(Fiddle)返回的值是a，因为undefined部分尚未执行。 AJAX就像这样，你在服务器有机会告诉浏览器这个值是什么之前返回值。

这个问题的一个可能的解决方案是重新编写代码，告诉程序在计算完成时该做什么。

a=5

这叫做function onComplete(a){ // When the code completes, do this alert(a); } function getFive(whenDone){ var a; setTimeout(function(){ a=5; whenDone(a); },10); }。基本上，我们正在传递CPS一个动作，当它完成时，我们告诉我们的代码如何在事件完成时作出反应（比如我们的AJAX调用，或者在这种情况下是超时）。

用法是：

getFive

哪个应警告“5”到屏幕。 getFive(onComplete);。

Possible solutions

基本上有两种解决方法：

使AJAX调用同步（让我们称之为SJAX）。
重构代码以使用回调正常工作。

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

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

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

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

如果你必须这样做，你可以传递旗帜：(Fiddle)

Here is how:

2.重组代码

让你的函数接受回调。在示例代码中，可以使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); }接受回调。当foo完成时，我们将告诉我们的代码如何反应。

所以：

foo

变为：

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

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

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

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

现在，让我们定义foo自己采取相应的行动

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

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理解这个(fiddle)。

Answer 13

在与JavaScript的“神秘”挣扎时，我们面临着一个非常普遍的问题。让我尝试揭开今天的神秘面纱。

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

https://github.com/amaksr/nsynjs/tree/master/examples

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

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

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()），但它确实启动了一个计时器，它在1s之后执行一个函数来返回'wohoo'。但正如您所看到的，分配给bar的值是来自foo（）的立即返回的内容，而不是后来发生的任何其他内容。

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

让我们问一下我们的功能吧。 Promise实际上意味着它意味着什么：它意味着该功能可以保证您提供将来获得的任何输出。所以让我们看看上面的小问题：

undefined

因此，总结是 - 要处理异步函数，如基于ajax的调用等，你可以使用一个承诺function foo(){ return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something setTimeout ( function(){ // promise is RESOLVED , when 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' });值（你打算返回）。因此，简而言之，您在异步函数中解析值而不是返回值。

UPDATE（与异步/等待的承诺）

除了使用resolve处理承诺之外，还有一种方法。我们的想法是识别异步函数，然后在转移到下一行代码之前等待promises解析。它仍然只是引擎盖下的then/catch，但采用了不同的句法方法。为了使事情更清楚，您可以在下面找到比较：

then/catch version:

promises

async/await version:

function fetchUsers(){
   let users = [];
   getUsers()
   .then(_users => users = _users)
   .catch(err =>{
      throw err
   })
   return users;
 }

Answer 14

ECMAScript 6具有“生成器”，允许您以异步方式轻松编程。

  async function fetchUsers(){
     try{
        let users = await getUsers()
        return users;
     }
     catch(err){
        throw err;
     }
  }

要运行上面的代码，请执行以下操作：

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

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

回调const gen = myGenerator(); // Create generator gen.next(); // Start it gen.next((...args) => gen.next([...args])); // Set its callback function包含在一个数组中，并在读取它们时进行解构，以便模式可以处理具有多个参数的回调。例如，使用...args：

node fs

Answer 15

以下是一些使用异步请求的方法：

const [err, data] = yield fs.readFile(filePath, "utf-8", callback);
Browser Promise object - JavaScript的承诺库
Q
A+ Promises.js
jQuery deferred
使用回调概念 - 作为第一个答案中的实现

Example: jQuery deferred implementation to work with multiple requests

XMLHttpRequest API

Answer 16

简短回答：你的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();方法立即返回，而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()中。

Answer 17

在result.response成功中使用callback()函数。试试这种方式。它简单易懂。

foo()

Answer 18

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

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

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

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();

因为JS无法知道在执行var milk = order_milk(); put_in_coffee(milk);之前需要等待order_milk完成。换句话说，它不知道put_in_coffee是异步的 - 在未来的某个时间之前不会产生牛奶。 JS和其他声明性语言在不等待的情况下执行一个接一个的语句。

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

order_milk

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

Enter promises

这是“承诺”概念的动机，“承诺”是一种特殊类型的价值，代表某种未来或异步结果。它可以代表已经发生的事情，或者将来会发生的事情，或者根本不会发生的事情。 Promise有一个名为var answer; $.ajax('/foo.json') . done(function(response) { callback(response.data); }); function callback(data) { console.log(data); }的方法，当promise表示的结果已经实现时，你传递一个动作。

在我们的牛奶和咖啡的情况下，我们设计then返回牛奶到达的承诺，然后指定order_milk作为put_in_coffee行动，如下：

then

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

order_milk() . then(put_in_coffee)

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

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

实际上，我们所做的就是在function get_data() { return $.ajax('/foo.json'); }的召唤中增加了一个return。这是有效的，因为jQuery的$.ajax已经返回了一种类似承诺的东西。（在实践中，没有详细说明，我们宁愿包装这个调用，以便返回一个真正的承诺，或者使用$.ajax的替代方法。）现在，如果我们想要加载文件并等待它完成然后做点什么，我们可以简单地说

$.ajax

例如，

get_data() . then(do_something)

使用promises时，我们最终将许多函数传递给get_data() . then(function(data) { console.log(data); });，因此使用更紧凑的ES6样式箭头函数通常很有帮助：

then

The `get_data() . then(data => console.log(data));` keyword

但是，对于必须以同步方式编写代码并且异步时采用完全不同的方式，仍然存在一些模糊不满的问题。对于同步，我们写

async

但如果a(); b();是异步的，我们必须写下承诺

上面，我们说，“JS无法知道它需要等待第一次调用才能执行第二次”。如果有某种方法可以告诉JS，那不是很好吗？事实证明，有一个a() . then(b);关键字，用于称为“异步”函数的特殊类型的函数中。此功能是即将推出的ES版本的一部分，但已经在诸如Babel之类的转发器中提供了正确的预设。这允许我们简单地写

await

在你的情况下，你可以写出类似的东西

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

Answer 19

当然有许多方法，如同步请求，承诺，但根据我的经验，我认为你应该使用回调方法。 Javascript的异步行为很自然。因此，您的代码段可以重写一点：

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

Answer 20

问题是：

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

可以解释为：

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

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

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

（虽然它可以用Javascript编写，但我更喜欢用Python编写它，并使用function foo() { var result; $.ajax({ url: '...', success: function(response) { myCallback(response); } }); return result; } function myCallback(response) { // Does something. }将其编译为Javascript。它就足够清楚了。）

让我们首先启用JQuery用法，让Transcrypt可用作$：

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

__pragma__ ('alias', 'S', '$')

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

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

Answer 21

Using Promise

这个问题最完美的答案是使用async def readALot(): try: result1 = await read("url_1") result2 = await read("url_2") except Exception: console.warn("Reading a lot failed")。

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

But wait...!

使用promises有问题！

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

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

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

所以我决定将ES3的Promise类实现到js编译器以下，如果没有定义的话。只需在主代码之前添加此代码，然后安全地使用Promise！

Uncaught ReferenceError: Promise is not defined

Answer 22

而不是向你抛出代码，有两个概念是理解JS如何处理回调和异步性的关键。（那是一个字吗？）

if(typeof Promise === "undefined"){ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Promise = function () { function Promise(main) { var _this = this; _classCallCheck(this, Promise); this.value = undefined; this.callbacks = []; var resolve = function resolve(resolveValue) { _this.value = resolveValue; _this.triggerCallbacks(); }; var reject = function reject(rejectValue) { _this.value = rejectValue; _this.triggerCallbacks(); }; main(resolve, reject); } Promise.prototype.then = function then(cb) { var _this2 = this; var next = new Promise(function (resolve) { _this2.callbacks.push(function (x) { return resolve(cb(x)); }); }); return next; }; Promise.prototype.catch = function catch_(cb) { var _this2 = this; var next = new Promise(function (reject) { _this2.callbacks.push(function (x) { return reject(cb(x)); }); }); return next; }; Promise.prototype.triggerCallbacks = function triggerCallbacks() { var _this3 = this; this.callbacks.forEach(function (cb) { cb(_this3.value); }); }; return Promise; }(); }

你需要注意三件事;队列; The Event Loop and Concurrency Model和堆栈

在广泛，简单的术语中，事件循环就像项目管理器一样，它不断地监听任何想要在队列和堆栈之间运行和通信的函数。

the event loop

一旦收到要运行的消息，它就会将其添加到队列中。队列是等待执行的事物列表（如您的AJAX请求）。想象它是这样的：

while (queue.waitForMessage()) {
   queue.processNextMessage();
}

当其中一条消息要执行时，它会弹出队列中的消息并创建一个堆栈，堆栈是JS需要执行的所有操作来执行消息中的指令。所以在我们的例子中，它被告知要打电话给1. call foo.com/api/bar using foobarFunc 2. Go perform an infinite loop ... and so on

foobarFunc

所以foobarFunc需要执行的任何东西（在我们的例子中是function foobarFunc (var) { console.log(anotherFunction(var)); }）都会被压入堆栈。执行，然后忘记 - 事件循环将移动到队列中的下一个事物（或侦听消息）

这里的关键是执行顺序。那是

什么时候会发生

当您使用AJAX向外部方进行调用或运行任何异步代码（例如setTimeout）时，Javascript依赖于响应，然后才能继续。

最大的问题是什么时候能得到答复？答案是我们不知道 - 因此事件循环正在等待该消息说“嘿运行我”。如果JS只是同步等待那条消息你的应用程序会冻结，它会很糟糕。因此，JS继续执行队列中的下一个项目，同时等待消息被添加回队列。

这就是为什么使用异步功能我们使用称为回调的东西。它有点像anotherFunction字面意思。正如我承诺在某些时候返回一些东西，jQuery使用称为promise deffered.done和deffered.fail（以及其他）的特定回调。你可以看到他们所有deffered.always

所以你需要做的是传递一个承诺在某个时刻执行的函数，并传递给它的数据。

因为回调不是立即执行，而是在以后执行，所以将引用传递给函数并不重要。所以

here

所以大部分时间（但不总是）你会通过function foo(bla) { console.log(bla) }而不是foo

希望这会有所帮助。当你遇到这样的事情似乎令人困惑时 - 我强烈建议你完全阅读文档，至少要了解它。它会让你成为一个更好的开发者。

Answer 23

read the AJAX getting started guide 2（首先阅读XMLHttpRequest和Benjamin Gruenbaum的答案）

如果你不使用jQuery并想要一个很好的简短的XMLHttpRequest 2，它适用于现代浏览器，也适用于移动浏览器，我建议用这种方式：

Felix Kling

如你看到的：

它比列出的所有其他功能都短。
回调是直接设置的（因此没有额外的不必要的闭包）。
它使用新的onload（因此您不必检查readystate && status）
还有其他一些我不记得的情况会让XMLHttpRequest 1变得烦人。

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

最简单的：

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

或者，如果由于某种原因你this.response回调到一个类：

bind()

例：

e.target.response

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

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

没什么比这更容易

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

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

它支持所有*现代浏览器。我可以确认，因为我使用这种方法，因为XMLHttpRequest 2存在。在我使用的所有浏览器上，我从未遇到任何类型的问题。

onreadystatechange仅在您希望获取状态2的标头时才有用。

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

现在，如果您想使用post和FormData更复杂的东西，您可以轻松扩展此功能：

XMLHttpRequest

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

用法示例：

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

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

话虽如此......为什么不这么简单呢？

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

行动错误

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

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

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

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

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

即使你将'fdggdgilfdghfldj'作为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.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);下面的displayAjax()内部作为this.statusText。

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

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

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

只有Method not Allowed被设置为错误。

如果您完全无法控制错误，为什么要添加错误处理程序？大多数错误都在回调函数this.type中返回。

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

PS：作为我写的第一个测试x（'x'，displayAjax）......，它完全得到了回应...... ???所以我检查了HTML所在的文件夹，并且有一个名为'x.xml'的文件。因此，即使您忘记了文件的扩展名，XMLHttpRequest 2也会找到它。我好意思

同步读取文件

不要那样做。

如果你想阻止浏览器一段时间加载一个漂亮的大displayAjax()文件同步。

.txt

现在你可以做到

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

没有其他方法可以以非异步方式执行此操作。（是的，使用setTimeout循环......但是认真吗？）

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

只有当你有一个页面，你总是加载相同的XML / JSON或任何你只需要一个函数。在这种情况下，修改一点Ajax函数并用您的特殊函数替换b。

以上功能仅供基本使用。

如果你想扩展功能......

是的你可以。

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

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

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

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

Answer 24

在看树之前先看看森林。

这里有许多信息丰富的答案和细节，我不会重复其中任何一个。在JavaScript中编程的关键是首先要有正确的整体执行心智模型。

您的入口点将作为事件的结果执行。例如，带有代码的脚本标记将加载到浏览器中。（因此，这就是为什么您可能需要关注页面是否准备好运行代码，如果它需要首先构造dom元素，等等）
您的代码执行完成 - 无论它做多少异步调用 - 都不执行任何回调，包括XHR请求，设置超时，dom事件处理程序等。等待执行的每个回调都将排在队列中，等待他们轮到在其他被解雇的事件完成执行后运行。
一旦调用，每个单独的回调到XHR请求，设置超时或dom事件将运行完成。

好消息是，如果你理解这一点，你将永远不必担心竞争条件。首先，您应该如何组织代码本质上是对不同离散事件的响应，以及您希望如何将它们组合成逻辑序列。您可以使用promises或更高级别的新异步/等待作为工具，或者您可以自己动手。

但是，在熟悉实际问题域之前，不应使用任何战术工具来解决问题。绘制这些依赖关系的映射，以了解何时需要运行。尝试对所有这些回调采用临时方法并不能很好地为您服务。

Answer 25

If you're using promises, this answer is for you.

这意味着AngularJS，jQuery（带有延迟），本机XHR的替换（fetch），EmberJS，BackboneJS的保存或任何返回promises的节点库。

你的代码应该是这样的：

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

Felix Kling为使用jQuery和AJAX回调的人写了一个很好的答案。我有一个原生XHR的答案。这个答案是对前端或后端的承诺的一般用法。

The core issue

浏览器和具有NodeJS / io.js的服务器上的JavaScript并发模型是异步和被动的。

无论何时调用返回promise的方法，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.处理程序总是异步执行 - 也就是说，在它们之下的代码之后不在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，因为undefined部分尚未执行。它可能会在一秒钟内执行，但到那时它与返回的值无关。

由于操作尚未发生（AJAX，服务器调用，IO，计时器），因此在请求有机会告诉您的代码该值是什么之前，您将返回该值。

这个问题的一个可能的解决方案是重新编写代码，告诉程序在计算完成时该做什么。承诺通过在时间上是时间敏感的（时间敏感的）来积极地实现这一点。

Quick recap on promises

承诺是一种随时间变化的价值。承诺有状态，它们开始等待没有价值，可以解决：

实现了计算成功完成的意义。
拒绝意味着计算失败。

承诺只能改变一次状态，之后它将永远保持在同一状态。您可以将data = 5处理程序附加到promises以提取其值并处理错误。 then处理程序允许then的电话。承诺由chaining创建。例如，更现代的AJAX替代using APIs that return them或jQuery的fetch返回承诺。

当我们在承诺上调用$.get并从中返回一些东西时 - 我们得到了对已处理值的承诺。如果我们回到另一个承诺，我们会得到惊人的东西，但让我们抓住我们的马。

With promises

让我们看看我们如何用promises解决上述问题。首先，让我们通过使用.then创建延迟函数来证明我们对上面的承诺状态的理解：

Promise constructor

现在，在我们将setTimeout转换为使用promises之后，我们可以使用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); }); }来计算它：

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, we can't access the plain value getFive().then(function(five){ document.body.innerHTML = five; });解包。它就像一个你可以用then打开的盒子。

Applying this

这与原始API调用相同，您可以：

then

所以这也适用。我们已经知道我们不能从已经异步的调用中返回值，但是我们可以使用promises并将它们链接起来执行处理。我们现在知道如何从异步调用返回响应。

ES2015 (ES6)

ES6引入了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` })，这些函数可以在中间返回，然后恢复它们所处的位置。这通常对序列有用，例如：

generators

是一个函数，它返回一个可以迭代的function* foo(){ // notice the star, this is ES6 so new browsers/node/io only yield 1; yield 2; while(true) yield 3; }序列的迭代器。虽然这本身很有趣并且为很多可能性开辟了空间，但有一个特别有趣的案例。

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

这个有点棘手但非常强大的技巧让我们以同步方式编写异步代码。有几个“跑步者”为你做这个，写一个是几行代码，但超出了这个答案的范围。我将在这里使用Bluebird的1,2,3,3,3,3,....，但还有其他包装，如Promise.coroutine或co。

Q.async

此方法返回一个promise本身，我们可以从其他协同程序中使用它。例如：

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

ES2016 (ES7)

在ES7中，这是进一步标准化的，现在有几个提议，但在所有提案中你可以var main = coroutine(function*(){ var bar = yield foo(); // wait our earlier coroutine, it returns a promise // server call done here, 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 done }); main();承诺。通过添加await和async关键字，这只是上面ES6提案的“糖”（更好的语法）。制作上面的例子：

await

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

Answer 26

您正在使用Ajax。我们的想法不是让它返回任何东西，而是将数据交给称为回调函数的东西，该函数处理数据。

那是：

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 27

最简单的解决方案是创建一个JavaScript函数并为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

Answer 28

我会回答一个看起来很可怕的手绘漫画。第二个图像是你的代码示例中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); });是result的原因。

undefined

Answer 29

Angular1

对于使用的人，可以使用AngularJS处理这种情况。

Promises它说，

Promise可用于取消异步函数，并允许将多个函数链接在一起。

你也可以找到一个很好的解释Here。

在下面提到的here中找到的示例。

docs

Angular2和Later

在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.看看下面的例子，但它的Angular2使用recommended与Observables。

Angular2

}

你可以用这种方式消费，

 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不支持original，如果你想使用它，你可能需要插件。

此外，这里是native es6 Promises承诺的承诺。

Answer 30

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

spec

例：

// 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; }的回调尚未运行。

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

Parallel

您可以启动所有这些并跟踪您期望的回调次数，然后在获得许多回调时使用结果：

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:", 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的index将结果保存在forEach与其相关的条目相同的位置，即使结果无序到达（因为异步调用不一定按照它们的启动顺序完成）。

但是如果你需要从函数中返回那些结果呢？正如其他答案所指出的，你不能;你必须让你的函数接受并调用回调（或返回results）。这是一个回调版本：

Promise

例：

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:", 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:", 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:", 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; }通过一系列所有承诺的结果解决了它的承诺，当它们全部被解决时，或者当你给它的第一个承诺拒绝时拒绝承诺。

Series

假设您不希望操作并行？如果要一个接一个地运行它们，则需要等到每个操作完成后再开始下一个操作。这是一个函数的示例，它执行该操作并使用结果调用回调：

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:", 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，如果你可以使用ES2017 +语法（也许使用像doSomethingAsync这样的转换器），你可以使用Babel和async function和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:", 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));
    });
}

如果你不能使用ES2017 +语法（还），你可以在.as-console-wrapper { max-height: 100% !important; }上使用一个变体（这比通常的Promise更复杂，因为我们没有将结果从一个传递到下一个，而是收集他们的结果在数组中）：

"Promise reduce" pattern

例：

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:", 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+ arrow functions

例：

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:", 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));
    });
}

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

问题描述 投票：4983回答：35

35个回答

The problem

同步

异步

Solution(s)

ES2017 +：与async/await的承诺

让函数接受回调

ES2015 +：与then()的承诺

Side note: jQuery's deferred objects

Side note: Promise gotchas

不推荐：同步“Ajax”调用

Without jQuery

jQuery

2017 answer: you can now do exactly what you want in every current browser and node

如果潜在的功能被宣传

如果基础功能没有被承诺

If you're not using jQuery in your code, this answer is for you

What you're facing

Possible solutions

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

2.重组代码

UPDATE（与异步/等待的承诺）

then/catch version:

async/await version:

以下是一些使用异步请求的方法：

Example: jQuery deferred implementation to work with multiple requests

Enter promises

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

Using Promise

用法

But wait...!

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

什么时候会发生

If you're using promises, this answer is for you.

The core issue

Quick recap on promises

With promises

Applying this

ES2015 (ES6)

ES2016 (ES7)

Angular1

Angular2和Later

Parallel

Series

最新问题

问题描述投票：4983回答：35

ES2017 +：与`async/await`的承诺

The `get_data() . then(data => console.log(data));` keyword