处理延迟异步回调的典型方法

I'm new to web application development using Javascript.

我是使用Javascript开发web应用程序的新手。

As Javascript applications appear to work highly asynchronous i'm wondering if there is a common approach to handling callbacks that are invoked too late. For example assuming an asynchronous request is made and when the response finally comes back the application is in a different state which eventually is not suitable for processing the response.

随着Javascript应用程序似乎在高度异步地工作，我想知道是否有一种常见的方法来处理调用太迟的回调。例如，假设发出了异步请求，当响应最终返回时，应用程序处于不同的状态，这最终不适合处理响应。

How would you detect this situation and handle it in case of a successful as well as an error response? Can this issue be solved from a high-level architectural view or will the kind of solution always be tied to the JS framework and/or type of application?

您如何检测这种情况，并在成功和错误响应的情况下处理它?这个问题是否可以从高层架构的角度来解决，或者这种解决方案是否总是与JS框架和/或应用程序类型相关联?

In a related matter is it a recommended pattern for web applications to block input while server-side processing takes place?

与此相关的是，web应用程序在进行服务器端处理时阻止输入是推荐的模式吗?

Thank You

谢谢你！

2 个解决方案

#1

The quick answer to your question is a Promise.

对你的问题的快速回答是一个承诺。

Promises are a pattern that may soon be implemented into ECMA-6, however currently are exercised through your own custom code or the use of libraries such as Kris Kowal's q (see below).

承诺是一种模式，它可能很快被实现为ECMA-6，但是目前通过您自己的自定义代码或使用库(如Kris Kowal的q)来执行。

The pattern is fairly simple. You goal is to wrap the asynchronously-executing method or function in order to preserve it's scope and then act on it's return. For most libraries and approaches this is referred to as a then statement.

这个模式相当简单。您的目标是包装异步执行的方法或函数，以保存其作用域，然后对其返回进行操作。对于大多数库和方法，这被称为then语句。

A simple example:

一个简单的例子:

var theEventualResults;

goGetMeSomething().then(function(results) {
  //now I can store the results in my working scope
  theEventualResults = results;
});

The idea is that goGetMeSomething() returns a "Promise Object" that has a method then that executes when goGetMeSomething successfully executes. There are also ways to implement failure, through catching errors or reading failure response codes from requests.

其思想是，goGetMeSomething()返回一个“承诺对象”，该对象有一个方法，然后在goGetMeSomething成功执行时执行该方法。通过捕获错误或从请求中读取失败响应代码，也有实现失败的方法。

A failure example:

一个失败的例子:

var theEventualResults;

goGetMeSomething().then(function(results) {
  //now I can store the results in my working scope
  theEventualResults = results;
}).error(function(reason) {
  //now I can handle the failure, if it fails;
});

I would suggest you conduct a little research on Promises and their different implementations in different libraries, to further your grasp. This will also help you find what's best for your specific application.

我建议您在不同的库中对承诺及其不同的实现进行一些研究，以进一步了解。这也将帮助您找到对您的特定应用程序最好的东西。

So, in review of your questions:

所以，在回顾你们的问题时

How would you detect this situation and handle it in case of a successful as well as an error response?
- A promise pattern will likely be most useful
- 承诺模式可能最有用
您如何检测这种情况，并在成功和错误响应的情况下处理它?承诺模式可能最有用
Can this issue be solved from a high-level architectural view or will the kind of solution always be tied to the JS framework and/or type of application?
- This kind of solution can be implemented in JavaScript independently of any framework. However, if you are using a framework, then it may already have a promise pattern. It is typically useful to implement what the framework offers rather than using something else. AngularJS is a good example of this as Alex C pointed out.
- 这种解决方案可以独立于任何框架在JavaScript中实现。但是，如果您正在使用一个框架，那么它可能已经有了一个承诺模式。实现框架提供的内容而不是使用其他内容通常是有用的。正如Alex C所指出的，AngularJS就是一个很好的例子。
这个问题是否可以从高层架构的角度来解决，或者这种解决方案是否总是与JS框架和/或应用程序类型相关联?这种解决方案可以独立于任何框架在JavaScript中实现。但是，如果您正在使用一个框架，那么它可能已经有了一个承诺模式。实现框架提供的内容而不是使用其他内容通常是有用的。正如Alex C所指出的，AngularJS就是一个很好的例子。
In a related matter is it a recommended pattern for web applications to block input while server-side processing takes place?
- This falls a bit out of scope. I would suggest asking this in a separate question.
- 这有点超出范围。我建议在另一个问题上问这个问题。
在一个相关的问题中，它是web应用程序在服务器端处理发生时阻塞输入的推荐模式吗?这有点超出范围。我建议在另一个问题上问这个问题。

Here are some library references as well:

这里还有一些图书馆参考资料:

Q: https://github.com/kriskowal/q
问:https://github.com/kriskowal/q
RSVP: https://github.com/tildeio/rsvp.js
回复:https://github.com/tildeio/rsvp.js
WinJS: http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx
WinJS:http://msdn.microsoft.com/en-us/library/windows/apps/br211867.aspx

I am not suggesting you use any of these. That's for you to discover. Hopefully, this can help you see the pattern, however, and allow you to decide for yourself.

我不是建议你用这些东西。你会发现的。希望，这能帮助您看到模式，但是，并允许您自己决定。

javascript q asynchronous winjs rsvp promise

javascriptqasynchronouswinjsrsvppromise

#2

In angularJS, you can use $q.defer(), resolve(), reject() and promise, eg:

在angularJS中，您可以使用$ q.()、resolve()、reject()和promise(例如:

MyObject.myMethod = function(options){

  var deferred = $q.defer();

  myAsyncMethod(options, function(callback_data){
     deferred.resolve(callback_data);
  });  

  return deferred.promise;


};

then somewhere else in the code:

然后在代码中的其他地方:

 var foo = New MyObject();
   foo.myMethod(options).then(function(callback_data){
      // process callback here;
   });

#1