等待 3rd-party JS 库在 Angular 2 服务中完成初始化的最佳方式是什么？答案

【问题标题】：Best way to wait for 3rd-party JS library to finish initializing within Angular 2 service?等待 3rd-party JS 库在 Angular 2 服务中完成初始化的最佳方式是什么？
【发布时间】：2016-04-09 02:27:22
【问题描述】：

我在 Angular 服务中包装了一个 3rd-party JS 库。如何保证 3rd-party JS 库已加载/初始化/等。在使用我的服务之前？

您能否看看下面的代码并告诉我这是否是一种良好的编码习惯？我在服务的构造函数中设置了一个承诺（最终将实现的承诺），并且我的服务方法取决于该承诺的成功（参见getMessages）。

@Injectable()
export class GmailService {

  private _readyPromise;

  // Load Gmail API client library.
  // gapi.client.load() returns a promise.
  constructor() {
    this._readyPromise = gapi.client.load('gmail', 'v1');
  }

  private ready():Promise {
    return this._readyPromise;
  }

  // Return Gmail messages for the current user.
  getMessages() {
    return this.ready().then(() => {
      return gapi.client.gmail.users.messages.list({
        'userId': 'me'
      }).then(resp => console.log(resp));
    });
  }
}

在该示例中，我使用的是用于 JavaScript 的 Gmail API，事实证明gapi.client.load() 已经返回了一个承诺，这简化了代码。在不同的场景中，我可以创建自己的 Promise 并在满足特定条件时手动实现它。

【问题讨论】：

标签： angular es6-promise angular2-services

【解决方案1】：

你的方法看起来不错！另一种方法是在加载 Gmail API 库后引导您的应用程序：

var app = platform(BROWSER_PROVIDERS)
   .application([BROWSER_APP_PROVIDERS, appProviders]);

gapi.client.load('gmail', 'v1').then(() => {
  return app.bootstrap(AppComponent);
});

这样您就可以确保在您的应用程序中使用该库时已准备就绪。

以下是描述全局方法的相应 plunkr：https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview。

【讨论】：