同步函数 - Angular

Question

我需要在Angular同步函数中达成（即等待第一个结束）。

例如，我有两个提供商（MenuProvider 和 ShopProvider）。

MenuProvider 有一个方法：

getMenuItemsForCurrentShop()

通过 HTTP 检索当前商店的菜单项。

ShopProvider 有一个方法：

setCurrentShopById(idShop:number)

通过HTTP设置店铺当前使用的是哪个。

我需要 "getMenuItemsForCurrentShop()" 在 "setCurrentShopById(idShop:number)" 之后打电话。最好不要回调。

Answer 1

您不应该考虑使用同步 ajax 来解决您的问题，因为它们会导致浏览器挂起（糟糕的用户体验）并且还会暂时停止执行代码。将来 sync ajax 可能不会被任何浏览器支持。

你只需要遵循异步的方式来处理这个问题，使用promise模式会帮助你解决你的问题。您应该在 getMenuItemsForCurrentShop 的成功函数中调用其他函数 setCurrentShopById .then 函数。

I assumed getMenuItemsForCurrentShop function has returned promise object.

this.getMenuItemsForCurrentShop().then((response) => {
    this.setCurrentShopById(response.artists.items);
});

Answer 2

在 angular1 和 angular2 中处理这种情况的方式有所不同。

angular1 的典型方法是使用承诺，即您的第一个提供者方法将 return 承诺，您所做的就是调用 return 对象上的 .then 方法，传递 callback 函数将接受第一个方法的结果，您将在其中调用第二个方法。

有关此技术的示例，您可以查看@Pankaj 的回答。

Angular2 在这个意义上是不同的，因为它开始使用 ReactiveExtensions 库（rx.js）。因此，与 promises 相比，每个组件都可能 return Observable<Someth> 提供更多的方法来使用它。（尽管如此，您仍然可以对可观察对象使用承诺方法）。

有关如何使用 angular2\http 模块的示例，请参阅另一个问题：

另请查看 angular2

中的 http module docs

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

同步函数 - Angular

Synchronous functions - in Angular

rxjs

typescript

angular2-http

angular