如何从异步电话中返回响应？

Question

如何从函数 foo 中返回响应/结果，该是异步请求的？

我正在尝试从回调中返回值，并将结果分配给功能内部的局部变量并返回该值，但是这些方法实际上都没有返回响应 - 它们都返回 undefined >或变量结果的初始值是。

接受回调的异步函数的示例（使用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`
}

使用<<代码>然后承诺的块：

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

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

2. q - javascript
3. a+ promises.js
4. jquery deferred
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 2

简短答案：您的 foo（）方法立即返回，而 $ ajax（）呼叫在函数返回后执行异步 em>。问题是，一旦返回，就如何或何处存储了通过异步调用检索的结果。

该线程中已经提供了几种解决方案。也许最简单的方法是将对象传递到 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 3

在 foo（）成功中使用 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 4

使用承诺

对此问题的最完美答案是使用 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
});

---

，但等等...！

使用承诺有问题！

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

我已经使用了一段时间，直到我发现旧浏览器存在错误：

未介绍的参考：未定义承诺

因此我决定将自己的诺言类实施 es3的承诺类，如果未定义，请 javascript编译器。只需在主代码之前添加此代码，然后安全地使用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 5

使用ES2017，您应该将其作为函数声明。

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

并这样执行。

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

或承诺语法。

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 6

当然，有许多方法，例如同步请求，保证，但是根据我的经验，我认为您应该使用回调方法。 JavaScript的异步行为很自然。

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

function foo() {
    var result;

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

    return result;
}

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

Answer 7

问题是：

如何从异步呼叫中返回响应？

哪个可以解释为：

如何制作异步代码外观同步？

解决方案将是避免回调，并结合 Promises 和 async/等待。

我想为Ajax请求举一个示例。

（尽管可以用JavaScript编写，但我更喜欢用python编写它，然后使用 transcrypt

a > s ：

__pragma__ ('alias', 'S', '
定义一个返回a  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()

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

)

定义一个返回a Promise 的函数，在这种情况下，AJAX调用：

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

Answer 8

→有关使用不同示例的异步行为的更一般说明，请参见 为什么我的变量是在我的变量之后不变的，为什么我将其修改在功能中吗？ - 异步代码参考

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

a in

这是一个类比，希望能使同步和异步流更清晰地之间有所不同：

同步

想象您打电话给朋友，并要求他为您寻找东西。尽管可能需要一段时间，但您在电话上等待太空，直到您的朋友给您所需的答案。

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

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

var item = findItem();

// Do something with item
doSomethingElse();

即使 FindItem 可能需要很长时间才能执行， var item = var item = findItem（）; 必须等待，直到函数返回结果。

异步

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

这就是您执行AJAX请求时发生的事情。

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

执行并没有等待响应，而是立即继续执行，并且执行AJAX调用后的语句。为了最终获得响应，您提供了一个函数，一旦收到响应，a challback （请注意某件事？回电？）。在调用回调之前执行该呼叫后的任何语句。

---

解决方案

包含JavaScript！的异步性质，而某些异步操作提供同步的对应物（“ Ajax”也是如此），通常不愿意使用它们，尤其是在浏览器上下文中。

你为什么问不好？

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

所有这些都导致了非常糟糕的用户体验。用户将无法分辨出一切工作正常。此外，对于连接缓慢的用户而言，效果会更糟。

在以下内容中，我们将查看三种彼此之间建立的不同解决方案：

• 承诺 ynnc/等待 （ES2017++，如果您使用的话，可在较旧的浏览器中使用transpiler或recenener）
• 回调（在节点中流行）
• then（） （ES2015+）承诺（ES2015+）浏览器如果使用众多承诺库之一）

所有三个都在当前浏览器中可用，节点7+。

---

es2017+：promise async/等待

2017年在2017年发布的ecmascript版本引入了 andtax-level support syynChronionus函数。借助 async 和等待，您可以以“同步样式”编写异步。该代码仍然具有异步，但是阅读/理解更容易。

异步/等待在承诺之上构建： async 函数始终返回承诺。 等待“取消包裹”的承诺，并且如果拒绝承诺，则可以解决承诺的价值或丢弃错误。

重要：您只能在 async 函数或 en-us/doc/web/javaScript/guide/模块“ rel =“ noreferrer”> javascript模块。顶级等待在模块之外不支持，因此您可能必须制作一个异步（立即调用函数表达式）启动 async 上下文如果不使用模块。

您可以阅读有关 noreferrer“> async 和 等待MDN上。

这是详细列出 delay 函数 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/aync/negait 。您还可以在 recenererator 的帮助下，通过将代码转换为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 将参考我们传递给<<<的函数。代码> foo 我们调用它，然后将其传递给 Success 。即，一旦AJAX请求成功， $。ajax 将调用回调，然后将响应传递给回调（可以使用 result> Result 来参考。 ，因为这就是我们定义回调的方式）。

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

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

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

---

ES2015+： the

一个href =“ https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_object/global_objects/promise” rel =“ noreferrer”> Promise api ），但是它有很好的浏览器支持。也有许多库可以实现标准承诺API并提供其他方法来减轻异步功能的使用和组成（例如，）。

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

比普通回调的优势在于，它们允许您将代码解除，并且更容易撰写。

这是使用承诺的示例：

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电话，我们可以使用这样的承诺：

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

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

有关承诺的更多信息： html5 rocks -javascript Promises promises 。

旁注：jQuery的延期对象

延迟对象标准化）。他们的行为几乎像承诺，但暴露了略有不同的API。

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

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

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

侧面注意：promise gotchas new Chep

牢记承诺和递延对象只是容器 /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（）在检查服务器上的“/密码”页面时不会冻结代码 - 它将请求发送到服务器，并且在等待时，它立即返回jQuery AJAX递延对象，而不是服务器的响应。这意味着如果语句将始终获取此延期对象，请将其视为 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”调用

，一些（！）异步操作具有同步的对应物。我不主张他们的使用，但为了完整的缘故，这是您执行同步呼叫的方式：

如果

直接使用 xmlhttprequest 对象，将 false 作为第三个参数作为 .open 。

jQuery

如果您使用 jquery ，您可以设置 async 选项 false 。请注意，由于jQuery 1.8，此选项是弃用。
然后，您可以仍然使用成功回调，或访问 ResponseText jqxhr对象：

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

如果您使用任何其他jquery ajax方法，例如 $。get ， $。getjson 等。 。

抬头！无法同步 jsonp 请求。 JSONP本质上总是异步的（甚至不考虑此选项的另一个原因）。

Answer 9

如果您不是在您的代码中使用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> fetch api api，Angular或Promise的人，我在下面添加了另一个答案）

---

您面临的内容

是其他答案中“解释问题的解释”的简短摘要，如果您不确定阅读本文后，请阅读此内容。

Ajax中的 a 代表异步。这意味着发送请求（或更确切地说是接收响应）是从正常执行流中取出的。在您的示例中， 立即返回，下一个语句，返回结果； ，在传递给您的函数之前执行成功甚至被调用。

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

这是一个简单的类比：

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

（fiddle）

a 返回的值是未定义的因为 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”。 （fiddle）。

可能的解决方案

基本上有两种解决方法的方法：

1. 使Ajax调用同步（我们称其为sjax）。
2. 重组您的代码以正式使用回调。

1。同步Ajax-不要做！！

至于同步的Ajax，不要做！总而言之，它将冻结用户的浏览器，直到服务器返回响应并创建非常糟糕的用户体验。这是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);
}

”

https://develover.mozilla.org/en-us/docs/web/web/pai/xmlhttprequest/synchronous_and_ashronous_ashronous_requests#synchronous_requests#synchonchronous_request_request_request 您的功能接受回调。在示例代码 foo 中可以接受回调。当 foo 完成时，我们将告诉我们的代码如何 react 。

因此：

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并相应地行动（创建失败处理程序等），以进一步扩展这一点。实际上，它正在解决我们的问题。

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

Answer 10

xmlhtttprequest 2 2 href =“ https://stackoverflow.com/a/16825593/19068”> benjamin gruenbaum and ）

如果您不使用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＆amp; amp; status），
4. 还有其他一些情况，我不记得，这使XMLHTTTPREQUEST 1感到烦人。

有两种方法可以获取此AJAX调用的响应（三个使用XMLHTTPREQUEST var name）：

最简单：

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以来，我可以确认使用这种方法。在我使用的任何浏览器中，我从来没有任何类型的问题。

仅当您想在状态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);

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

话虽如此...为什么我们不这样做？

---

如评论中所述，使用错误＆amp; amp;同步确实打破了答案的重点。正确使用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”作为FormData传递，也不会出错。

在第一种情况下，该错误位于 displayajax（）下的 this.statustext 下的错误中，AS 方法不允许。

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

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

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

只有 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循环...但是认真吗

？

（ 您始终加载相同的XML/JSON或仅需要一个功能。在这种情况下，请修改Ajax功能，然后用特殊功能替换B。

---

以上功能供基本使用。

如果要扩展 功能...

是的，可以。

我使用了很多API，并且我集成到每个HTML页面中的第一个功能之一是此答案中的第一个AJAX函数，只有获取...

但是您可以使用XMLHTTTPREQUEST 2：我做了很多事情：

我做了一个下载Manager（使用简历，FileReader和Filesystem在两侧使用范围），使用Canvas的各种图像转移器转换器，填充Web SQL数据库，带有base64Images，很多更多...

但是在这些情况下，您应该仅出于此目的创建一个函数...有时您需要一个斑点或数组缓冲区，您可以设置标题，超越模拟物，还有很多...

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

Answer 11

如果您使用的是承诺，则此答案适合您。

这意味着Angularjs，jQuery（带延迟），本机 xhr“> xhr”> xhr href =“ https://en.wikipedia.org/wiki/ember.js” rel =“ noreferrer”> 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做得很好为使用jQuery和回调的人写答案。我有一个本地XHR的答案。这个答案是用于对前端或后端上承诺的一般用法。

---

核心问题

在浏览器和服务器上使用node.js/io.js在服务器中的JavaScript并发模型是 asynchronous 和反应性。

每当您调用返回诺言的方法时，然后处理程序始终异步执行 - 也就是说， 下方的代码不是在中。然后处理程序。

这意味着，当您返回数据 处理程序尚未执行。反过来，这意味着您要返回的值尚未设置为正确的值。

这是一个简单的类比：

    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 的值是不确定的，因为 data = 5 零件尚未执行。它可能会在一秒钟内执行，但是到那时，它与返回的值无关。

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

解决此问题的一种可能解决方案是代码 ，告诉您的程序完成计算后该怎么办。承诺通过本质上是时间（时间敏感）来积极实现这一目标。

快速回顾承诺的承诺

是随时间的价值。承诺有状态。他们从没有价值的待审开始，可以安定下来：

• 实现意味着计算成功完成。
• 拒绝意味着计算失败。

诺言只能改变状态 之后，它将永远保持在同一状态。您可以将附加处理程序附加，以承诺提取其价值并处理错误。 然后处理程序允许 chaning> chaning> chaning 。承诺由使用返回它们。例如，更现代的AJAX替换 Fetch 或jQuery的 $。get 返回承诺。

当我们调用。如果我们回报另一个诺言，我们会得到令人惊奇的事情，但让我们握住马匹。

有了承诺，

让我们看看如何通过承诺解决上述问题。首先，让我们通过使用承诺构造函数用于创建延迟功能：

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

现在，我们转换的settiemoutout 使用诺言，我们可以使用<代码>然后使其计数：

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

基本上，而不是返回 value ，我们由于并发模型而无法做，而是我们返回a wrapper ，以获取我们可以 unwrap <的值/em>带有<代码>然后。就像一个框，您可以使用然后打开。

在原始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`
})

这样也可以。我们已经了解到，我们无法从已经异步的调用中返回值，但是我们可以使用诺言并将其链接来执行处理。现在，我们知道如何从异步呼叫中返回响应。

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，.... 可以迭代。尽管这本身很有趣，并为很多可能性打开了空间，但有一个特别的案例。

如果我们要产生的序列是一系列动作，而不是数字 - 我们可以在恢复函数之前等待动作并等待该功能。因此，我们需要一个 future 值的序列，而不是数字序列，也就是说：承诺。

这有点棘手，但非常有力的技巧让我们以同步的方式编写异步代码。有几个“跑步者”为您做到这一点。写一条是几行代码，但它超出了该答案的范围。我将在此处使用Bluebird的 Promise.coroutine ，但是还有其他包装器，例如 co <​​/code>或 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
});

此方法返回了一个承诺本身，我们可以从其他coroutines中消费。例如：

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

ES7中的ES2016（ES7）

，这是进一步标准化的。现在有几个建议，但是在所有建议中，您都可以等待承诺。这只是上述ES6提案的“糖”（较好的语法），通过添加 async 和等待关键字。进行上面的示例：

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 12

您错误地使用了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 13

我会以可怕的手绘漫画回答。第二张图像是结果是 在代码示例中的原因。

Answer 14

最简单的解决方案是创建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 15

这里的大多数答案给出了一个有用的建议，何时进行单个异步操作，但是有时候，当您需要在数组或其他类似列表的结构中为每个每个条目进行异步操作时，这会出现。诱惑是这样做：

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

不起作用的原因是 dosomethingsasync 的回调尚未在尝试使用结果时运行。

因此，如果您有一个数组（或某种形式的列表），并且想对每个条目进行异步操作，则有两个选项：并行执行操作（重叠）或串联（一个接一个地，顺序）。

并行

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

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

（我们可以消除期望，只使用 result.length === thearray.length ，但这使我们对 thearray的可能性开放在呼叫未偿的时候更改...）

请注意我们如何使用 index for foreach 将结果保存在结果中与即使结果取出订单，它也与之相关（因为异步调用不一定要以启动的顺序完成）。

但是，如果您需要返回 这些结果来自函数呢？正如其他答案所指出的，您不能；您必须接受函数接受并致电回调（或返回a 承诺）。这是回调版本：

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

当然，如果 dosomethingsasync 传递了我们的错误，我们将使用 recept> recood 拒绝当我们遇到错误时承诺。）

示例：

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

制作包装器，然后执行以下...）

（或者，或者，您可以为返回承诺的 dosomethingsasync a Promise ，您可以使用，您可以使用“ noreferrer”> 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 通过所有诺言的结果来解决其承诺，当他们全部解决时，您给予的承诺，或者在 first of时拒绝其承诺您给予的承诺拒绝。

系列

假设您不希望操作并行？如果您想一个接一个地运行它们，则需要等待每个操作完成下一个操作。这是一个可以执行此操作并调用结果的函数的示例：

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）（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; }

（或者，再次为 dosomethingsasync 构建一个包装器，可以给您一个承诺，并做下面...）

如果 Dosomething> ，如果您可以使用ES2017+语法（也许与 babel ），您可以使用 async 函数 with for/code> < /a>和 等待等待

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

href = “

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

If you can't use ES2017+ syntax (yet), you can use a variation on the

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

...与：

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 16

使用

个人“ 。

在这里

承诺可以用来发出异步功能，并允许一个人将多个功能链接在一起。

您可以找到一个不错的解释在这里也是如此。

在

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

观察的 。 href =“ https://angular-2-training-book.rangle.io/handout/http/requests_as_promises.html” rel =“ noreferrer”>原始在此处发布。但是Typescript不支持本机ES6承诺，如果您想使用它，您可能需要插件为此。

此外，这是承诺规格。

Answer 17

请查看此示例：

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：

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 18

这是双向数据绑定或商店概念在许多新的JavaScript框架中使用的地方之一，这对您来说非常有用...

因此，如果您使用< a href =“ https://en.wikipedia.org/wiki/angular_(web_framework）” rel =“ noreferrer”> angular href =“ https://en.wikipedia.org/wiki/wiki/react_(web_framework）” rel =“ noreferrer”> react 或任何其他有双向数据绑定或存储概念的其他框架，此问题是简单地为您修复，因此，简单地说，您的结果是在第一阶段，因此您有 result =未定义的在收到数据之前，一旦获得结果，它将被更新并分配给新值AJAX调用的响应...

但是如何在纯JavaScript或例如，正如您在这个问题中提出的那样？

您可以使用回调，承诺并最近可观察到为您处理。例如，在承诺中，我们具有一些功能，例如 success（）或 then（），当您的数据准备就绪时将执行。可观察到的回调或 subscribe 函数相同。

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

有关更多信息，研究承诺和观察物是做这种异步工作的新方法。

Answer 19

这是我们在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 。

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

？
承诺实际上是关于它的含义：这意味着功能可以确保您提供将来的任何输出。因此，让我们在上面的小问题上查看它的行动：

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的呼叫等异步函数，您可以使用承诺来 resolve> resolve 该值（哪个值（您打算返回）。因此，简而言之，您解决值，而不是返回，在异步函数中。

除了使用然后/catch 与Promises合作之外，更新（ASYNC/等待的承诺）

除了使用之外，还有另一种方法。这个想法是识别异步函数，然后等待承诺在移至下一行代码之前解决。它仍然只是引擎盖下的承诺，但采用不同的句法方法。为了使事情变得更清晰，您可以在下面找到一个比较：

然后/捕获版本：

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

async/等待版本：

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

Answer 20

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

这是一个相同的示例：

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 21

尽管承诺和回调在许多情况下都可以正常工作，但后方表达出类似的内容是一种痛苦：

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

您最终会通过 async1 ;检查 name 是否未定义，并相应地致电回调。

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

async1(name, async2)

虽然好的在小例子中，当您有很多类似的情况和涉及错误处理时，它会很烦人。

纤维有助于解决问题。

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 22

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

• 处理异步HTTP调用；
• 等待每个API呼叫的响应；
• 使用 promise 模式;
• 使用

这个工作示例是独立的。它将定义一个简单的请求对象，该对象使用窗口 xmlhttprequest 对象进行呼叫。它将定义一个简单的功能，以等待一堆诺言要完成。

语境。该示例是查询 spotify web api 端点以搜索播放列表给定的查询字符串的对象：

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

对于每个项目，一个新的承诺将发射一个块 - executionBlock ，解析结果，根据结果数组安排一组新的承诺，即Spotify user 对象的列表，并在 executionProfileBlock ynchronChronical中执行新的HTTP调用。

然后，您可以看到一个嵌套的承诺结构，该结构使您可以产生多个和完全异步的嵌套HTTP调用，并通过 Promise.all 从每个呼叫的每个子集中加入每个子集的结果。

注意
最近的Spotify 搜索 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 23

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

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

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

Answer 24

javaScript是单线线。

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

1. 事件循环

2. Web API

3. 事件队列

活动循环将永远运行，即，有点无限循环。事件队列是在某些事件上推动所有功能的地方（例如：单击）。

这是一对一地从队列中进行的，并将其放入事件循环中，该循环执行此功能，并在执行第一个功能后为下一个功能做准备。这意味着在事件循环中执行一个函数之前，执行一个函数才能启动。

现在，让我们认为我们在队列中推动了两个功能。一种是从服务器中获取数据，另一个是利用该数据。我们首先在队列中推动了serverRequest（）函数，然后在fultiedata（）函数中推出。在事件循环中，ServerRequest函数会进行，并致电服务器，因为我们永远不知道从服务器获取数据需要多少时间，因此此过程有望花费时间，因此我们忙于活动循环，从而悬挂了页面。

这就是Web API担任角色的地方。它从事件循环中获取此功能，并处理服务器，使事件循环免费，因此我们可以从队列执行下一个功能。

队列中的下一个功能是lutiedata（），它在循环中进行，但是由于没有可用的数据，它一直浪费和执行下一个功能一直持续到队列结束为止。 （这称为异步调用，即，我们可以做其他事情，直到获取数据为止。）

让我们假设我们的ServerRequest（）函数在代码中具有返回语句。当我们从服务器Web API获取数据时，它将在队列结束时将其推入队列。

当它在队列结束时被推开时，我们无法利用其数据，因为我们队列中没有任何功能可以利用此数据。 因此，不可能从异步调用中返回某些东西。

因此，解决方案是 callback 或 promise 。

• An image 来自这里的答案之一正确说明了回调使用...*

我们提供了我们的功能（使用从服务器）到调用服务器的函数。

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 callback

Answer 25

2017答案：您现在可以在当前的每个浏览器中完全做您想要的操作， noreferrer”> node.js

这很简单：

• 返回诺言
• 使用'等待'承诺将分解为一个值（例如HTTP响应）
• 添加“ noreferrer”>'

async代码的版本：

(async function(){

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

})()

在所有当前浏览器和node.js 8 中都支持等待

Answer 26

您可以使用此自定义库（用承诺书写）进行远程调用。

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 27

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

如果基础函数受到承诺，则

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

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

如果基础函数不承诺

步骤1。将函数用回调包装到Nsynjs-Aware Warper包装器（如果它具有合理的版本，您可以跳过此步骤）：

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 28

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>

whops！
线的输出
console.log（'最后，结果：' +结果）;
我认为将在另一个输出之前打印出上次。
- 并且它不包含结果：它只是打印未定义的。 ¹
怎么会？

一个有用的见解，

我清楚地记得我的第一个 aha （

Answer 29

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 fs ：

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

Answer 30

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

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

考虑一个例子。您打电话给牛奶员并点牛奶。到来时，您想把它放入咖啡中。您现在不能将牛奶放入咖啡中，因为它还不在这里。您必须等待它来放入咖啡之前。换句话说，以下内容无法使用：

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

因为JavaScript无法知道它需要等待 order> order_milk 在执行 put_in_coffee 。换句话说，它不知道 order_milk 是异步 - 是直到将来的时间都不会导致牛奶的东西。 JavaScript和其他声明性语言在不等待的情况下执行一个语句。

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

order_milk(put_in_coffee);

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

这种回调方法的问题在于，它用返回污染了函数的正常语义；取而代之的是，函数不得通过调用给定的回调作为参数来报告其结果。同样，在处理更长的事件序列时，这种方法可能会迅速变得笨拙。例如，假设我想等待将牛奶放入咖啡中，然后再进行第三步，即喝咖啡。我最终需要写下这样的东西：

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

我要传递到 put_in_coffee 两个牛奶都要放入其中，还有一旦牛奶执行操作（ draind_coffee ）已被放入。此类代码很难编写，阅读和调试。

在这种情况下，我们可以在问题中重写：

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

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

Enter Prosise

这是“承诺”概念的动机，这是一种特定的价值，代表A future> Future 或异步某种形式的结果。它可以代表已经发生的事情，或者将来会发生，或者可能永远不会发生。承诺具有一种名为然后的方法，当您实现承诺所代表的结果时，您将通过该操作执行。

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

order_milk() . then(put_in_coffee)

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

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

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

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

实际上，我们所做的只是添加返回到调用到 $。ajax 。这是因为jQuery的 $。ajax 已经返回一种有希望的东西。 （实际上，在不详细介绍的情况下，我们希望将此调用包装，以便返回真正的诺言，或者使用 $。ajax 的替代方案。）现在，如果我们想加载文件并等待它完成

get_data() . then(do_something)

做点事

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

然后 紧凑型ES6式箭头函数：

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

async 关键字

，但是如果同步和异步，必须以一种方式编写代码，以一种方式编写代码仍然有些不满意。对于同步，我们编写，

a();
b();

但是如果 a 是异步的，则有了我们必须

a() . then(b);

在上面写下的承诺，我们说：“ JavaScript无法知道它需要等待第一个呼叫在执行第二次之前完成。如果有某种方式告诉JavaScript，那不是很好吗？事实证明，存在 - 等待关键字，在一种特殊类型的函数中使用，称为“ async”函数。此功能是即将推出的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);
}