Question

我正在尝试让我的应用程序呈现数据，这些数据是返回Promises的异步http请求的结果。我已经设置了我的代码，以便它在ngOnInit方法中执行，以便所有逻辑在视图呈现之前处理。但是，我遇到的问题是大多数Promise数据在呈现之前加载，但是一些数据滞后（可能是由于多个HTTP请求），因此视图的其余部分已经呈现，然后该数据会弹出几个几秒钟后。

Here is the full codebase on Github。

我是Angular2和ES6 Promises的新手，所以我还在玩Promise如何解析和发回数据所以请耐心等待。

从loadMore()调用我的ngOnInit方法，以便在加载页面时加载初始数据。

loadMore() {
    this.isLoading = true;

    this.pokedexService.getPokemon(this.pokemon.length, 9)
    .then(pokemon => {
      pokemon = pokemon.map(p => {
        p.imageLoaded = false;
        this.pokedexService.getPokemonTypes(p.id)
        .then(types => {
          p.types = types;
        });
        return p;
      });

      this.pokemon = this.pokemon.concat(pokemon);
      this.isLoading = false;
      this.error = false;
    })
    .catch(() => {
      this.error = true;
      this.isLoading = false;
    })
  }

问题的一部分（我认为）是对API的调用次数：getPokemon()进行一次调用以检索9个Pokemon API资源，然后getPokemonTypes()为每个资源调用9 { API资源。两种方法都返回Promises - 但是，从getPokemon()加载的数据正确加载到视图中;它是从每次调用加载到事件后弹出到视图中的getPokemonTypes()加载的Pokemon类型。以下是pokedex.service.ts两种get方法的逻辑：

getPokemon(offset: number, limit: number): Promise<any> {
    return this.http.get(`${this.baseUrl}?offset=${offset}&limit=${limit}`)
    .toPromise()
    .then(response => response.json().results)
    .then(items => items.map((item, idx) => {
      const id: number = idx + offset + 1;
      return {
        name: item.name,
        sprite: `${this.baseSpriteUrl}${id}.png`,
        id
      };
    }));
  }

  getPokemonTypes(id: number): Promise<any> {
    return this.http.get(`${this.baseUrl}${id}/`)
    .toPromise()
    .then(response => response.json())
    .then(details => {
      const types = details.types
      .map(t => {
        return t.type.name;
      });
      return types;
    });

优化代码以使所有数据加载在一起而不会在渲染数据时产生几（5-7）秒延迟的最佳方法是什么？

Answer 1

正如上面的评论所述，Observrables非常强大，您可以使用大量的操作符来提高工作效率。如果你仍然想使用toPromise我猜你可以让你的服务在getPokemon方法中处理getPokemonType。你调用getPokemon，一旦解决了，你只需将它映射到服务中的getPokemonType。然后，您只有一个承诺可以在您的组件中解决。

在所有Promise数据解决之前，如何保持视图模板的加载？ [Angular2，JavaScript]

1 个答案: