typescript 同步函数 - 在 Angular 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34840007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Synchronous functions - in Angular
提问by JaSHin
I need to reach in the Angular synchronous functions (that the other waiting for the end of the first).
我需要在 Angular 中达到同步函数（即另一个等待第一个结束）。
For example, I have two providers (MenuProvider and ShopProvider).
例如，我有两个提供者（MenuProvider 和 ShopProvider）。
MenuProvider has a method :
MenuProvider 有一个方法：
getMenuItemsForCurrentShop()
that over HTTP retrieves the menu items for the current shop.
它通过 HTTP 检索当前商店的菜单项。
ShopProvider has a method:
ShopProvider 有一个方法：
setCurrentShopById(idShop:number)
that sets via HTTP which the shop is currently used.
通过 HTTP 设置当前使用的商店。
I need to "getMenuItemsForCurrentShop()" called after "setCurrentShopById(idShop:number)". Ideally without callback.
我需要在“setCurrentShopById(idShop:number)”之后调用“getMenuItemsForCurrentShop()”。理想情况下没有回调。
采纳答案by vittore
There is some difference in a way how you are going to handle this situation in angular1 vs angular2.
在 angular1 和 angular2 中处理这种情况的方式有所不同。
Typical approach for angular1 is to use promises, i e your first provider method will return promise , and all you do is call .thenmethod on the return object, passing callbackfunction that will accept result of first method and you will call second method inside it.
angular1 的典型方法是使用承诺，即您的第一个提供者方法将返回 promise ，您所做的就是.then在返回对象上调用方法，传递callback将接受第一个方法的结果的函数，然后您将在其中调用第二个方法。
For an example of this technique you can see @Pankaj answer.
有关此技术的示例，您可以查看 @Pankaj 答案。
Angular2 is different in this sense as it started using ReactiveExtensions library ( rx.js). So every component likely to return Observable<Someth>which provide a lot more methods to work with it compared to promises. (You still can use promises approach with observables though).
Angular2 在这个意义上是不同的，因为它开始使用 ReactiveExtensions 库（rx.js）。因此Observable<Someth>，与 promise 相比，每个可能返回的组件都提供了更多的方法来使用它。（不过，您仍然可以对 observable 使用 promise 方法）。
For an example of how to use angular2\http module see another question: Angular 2: How to use/import the http module?
有关如何使用 angular2\http 模块的示例，请参阅另一个问题：Angular 2: How to use/import the http module?
Also take a look at http module docsin angular2
还可以查看angular2 中的http 模块文档
ShopApi.ts:
ShopApi.ts：
import {Injectable, bind} from 'angular2/di';
import {Http, Headers} from 'angular2/http';
import {Observable} from 'rx';
@Injectable()
export class ShopApi {
constructor(public http: Http) {
}
setCurrentShopById(idShop:Number) {
return this.http.get('http://myservice.com/current/shop/', idShop)
.toRx()
.map(res => res.json());
}
getMenuItemsForCurrentShop() {
return this.http.get('http://myservice.com/current/shop/items')
.toRx()
.map(res => res.json());
}
}回答by Pankaj Parkar
You shouldn't think of to make synchronous ajax to solve your problem, as they make browser hangs(bad user experience) & also stop execution of code for a while. May be in future syncajax are not going to be supported by any browser.
您不应该考虑使用同步 ajax 来解决您的问题，因为它们会使浏览器挂起（糟糕的用户体验）并且还会停止执行代码一段时间。可能在未来sync任何浏览器都不会支持 ajax。
You need to follow asynchronous way only to deal with this problem, using promise pattern would help you to solve your problem. You should call other function setCurrentShopByIdin the success function of getMenuItemsForCurrentShop.then function.
你只需要按照异步方式来处理这个问题，使用promise模式可以帮助你解决你的问题。您应该setCurrentShopById在getMenuItemsForCurrentShop.then 函数的成功函数中调用其他函数。
I assumed
getMenuItemsForCurrentShopfunction has returned promise object.
我假设
getMenuItemsForCurrentShop函数已经返回了 promise 对象。
this.getMenuItemsForCurrentShop().then((response) => {
this.setCurrentShopById(response.artists.items);
});
