JavaScript 中的异步编程，无需混乱的回调

Question

我想将异步函数转换为同步函数。

function fetch() {
  var result = 'snap!';
  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function messyCallback(data){
    result = data;
  });
  return result;
}

document.write(fetch());​

查看实际操作

结果始终是“snap!”，因为 $.getJSON 运行fetch() 完成后。

我的第一个想法是：

function fetch() {
  var result = 'snap!';
  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function messyCallback(data){
    result = data;
  });
  while (true) {
    if (result != 'snap!') return result;
  }
}

它不起作用并且还会关闭浏览器。

我读到了 JS 1.7 中的生成器和迭代器，但我不知道如何将其应用到我的问题上。

这个问题实际上与 jQuery 无关。 $.getJSON 可以是任何其他异步函数。

Answer 1

另请参阅此问题：停止 JavaScript 执行而不锁定浏览器

完全按照自己的意愿去做是行不通的。在单线程事件驱动环境中，您无法从异步创建同步（只能反过来！）。您应该拥抱该语言的异步特性，并围绕处理回调开发自己的一致风格，以便您的代码可读/可维护。例如，您可以选择不在回调闭包内执行任何实际工作，而只是为了清楚起见而调用另一个顶级函数/方法。

Answer 2

您想要推出自己的使用 $.ajax({async:false}) 的 $.getSyncJSON。请参阅：http://api.jquery.com/jQuery.ajax/。

不过，我必须建议您不要采取这种做法。您可以轻松锁定浏览器以阻止所有输入，使您的 UI 受网络支配。但如果您知道自己在做什么并且确定自己的用例，那就去做吧。

Answer 3

不要编写像 fetch 这样返回值的辅助方法，而是让它们接受另一个函数（“接收器”），将结果传递给：

function fetch(receiver) {

    $.getJSON("blah...", function(data) {

        receiver(data);
    });
}

显然这是多余的，因为它正是 getJSON< 的方式。 /code> 已经可以工作，但在更实际的示例中，fetch 函数会在传递结果之前以某种方式处理或过滤结果。

然后，而不是：

document.write(fetch());​

你会这样做：

fetch(function(result) { document.write(result); });

生成器可用于使异步代码在风格上更加线性。每次您需要一些异步结果时，您都会生成一个函数来启动它，并且生成器将在结果可用时恢复。会有一些管理代码来保持生成器的运行。但这并没有多大帮助，因为生成器并不是跨浏览器的标准。

如果您有兴趣，这里有一篇关于使用生成器整理异步的 博客文章代码。

Answer 4

JavaScript 语言有一个扩展，称为 StratifiedJS。它在每个浏览器中运行，并且允许您做到这一点：以同步/线性方式处理异步问题，而无需冻结浏览器。

您可以通过在网页中包含 Oni Apollo 来启用 Stratified JavaScript，例如：

<script src="http://code.onilabs.com/latest/oni-apollo.js"></script>
<script type="text/sjs"> your StratifiedJS code here </script>

您的代码如下所示：

function fetch() {  
  return require("http").jsonp(
    "http://api.flickr.com/services/feeds/photos_public.gne?" +
    "tags=cat&tagmode=any&format=json", {cbfield:"jsoncallback"});
}
document.write(fetch());​

或者，如果您确实想在 StratifiedJS 中使用 jQuery：

require("jquery-binding").install();
function fetch() {  
  var url = "http://api.flickr.com/?format=json&...&jsoncallback=?"
  return $.$getJSON(url);
}
document.write(fetch());​

文档位于 http://onilabs.com/docs

Answer 5

TameJS 库就是为了解决这个问题而设计的。

你可能会写一些类似的东西（未经测试）：

var result = 'snap!';
await {
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", defer(result));
}
return result;

Answer 6

jQuery 的下层 $.ajax() 函数 有更多选项，包括 async: [true|false] （默认为 true）。

尽管如此，在大多数情况下，您应该遵循 Ben 的建议并“接受语言的异步特性”。

Answer 7

我知道这一点有点晚了，但你可以在异步函数中使用 Promise 和等待来避免回调

deliverResult = (options) => (
  new Promise( (resolve, reject) => {
    $.ajax(options).done(resolve).fail(reject);
  })
)

getResult = async () => {
  let options = {
    type: 'get', 
    url: 'http://yourUrl.com', 
    data: {param1: 'arg1'}
  }
  console.log('waiting ..... ');
  let result = await deliverResult(options);
  console.log('**..waiting ended..**');
  console.log(result);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' onclick='getResult()' value='click me'/>