Angular 2 个可观察对象

Question

我正在构建一个应用程序以从 facebook 获取一些事件，看看：

事件组件：

events: Object[] = [];

constructor(private eventService: EventService) {
  this.eventService.getAll()
    .subscribe(events => this.events = events)
}

事件服务：

getAll() {
  const accessToken = 'xxxxxxxxxxx';
  const batch = [{...},{...},{...},...];
  const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;

  return this.http.post('https://graph.facebook.com', body)
    .retry(3)
    .map(response => response.json())
}

身份验证服务：

getAccessToken() {
    return new Promise((resolve: (response: any) => void, reject: (error: any) => void) => {
      facebookConnectPlugin.getAccessToken(
        token => resolve(token),
        error => reject(error)
      );
    });
  }

我有几个问题：

1) 如何设置间隔以每 60 秒更新一次事件？

2) accessToken 的值实际上将来自一个承诺，我应该这样做吗？

getAll() {
  const batch = [{...},{...},{...},...];
  this.authenticationService.getAccessToken().then(
    accessToken => {
      const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
      return this.http.post('https://graph.facebook.com', body)
        .retry(3)
        .map(response => response.json())
    },
    error => {}
  );
}

3) 如果是，我如何处理来自 getAccessToken() promise 的错误，因为我 return 只是观察者？

4) 默认情况下，post 请求的响应不会 return 对象数组，我将不得不进行一些操作。我应该这样做吗？

return this.http.post('https://graph.facebook.com', body)
  .retry(3)
  .map(response => response.json())
  .map(response => {
    const events: Object[] = [];
    // Manipulate response and push to events...
    return events;
  })

Answer 1

将事件放在超时块中并设置 60 秒的间隔。 setTimeout(() => {},60000).
使用模板字符串完全没问题，但您要告诉它的值来自承诺。如果您的整个代码块都在 promise 的 resolve 函数中，这应该没问题。所以这取决于你的代码在哪里。为什么要承诺。在 A2 中，建议使用 Observables 而不是承诺。不要混用。
您没有return错误函数中的任何内容。因此，如果您从该块中 return 出错，您将在出错的情况下获得错误数据。 error => error或error => { return error; }.
确切地说，您应该映射以获取响应并对其进行操作，return 只是该函数的数组。 .map(resp => { return resp.array})。由于响应是 JSON 格式，现在您必须从中获取数组并 return 它。在 returning 之前，您可以做任意多的修改。

随时编辑答案...

Answer 2

以下是您问题的答案：

1) 您可以利用 observables 的 interval 函数：

getAll() {
  const accessToken = 'xxxxxxxxxxx';
  const batch = [{...},{...},{...},...];
  const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;

  return Observable.interval(60000).flatMap(() => {
    return this.http.post('https://graph.facebook.com', body)
                    .retry(3)
                    .map(response => response.json());
  });
}

2) 您可以在此级别利用可观察对象的 fromPromise 函数：

getAll() {
  const batch = [{...},{...},{...},...];
  return Observable.fromPromise(this.authenticationService.getAccessToken())
                   .flatMap(accessToken => {
    const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
    return this.http.post('https://graph.facebook.com', body)
                    .retry(3)
                    .map(response => response.json())
    });
}

3) 您可以利用 catch 运算符来处理错误：

getAll() {
  const batch = [{...},{...},{...},...];
  return Observable.fromPromise(this.authenticationService.getAccessToken())
                   .catch(() => Observable.of({})) // <-----
                   .flatMap(accessToken => {
    const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
    return this.http.post('https://graph.facebook.com', body)
                    .retry(3)
                    .map(response => response.json())
    });
}

在这种情况下，当获取访问令牌发生错误时，将提供一个空对象来构建 POST 请求。

4) 是的，当然！ map 运算符允许您 return 您想要的...

Angular 2 个可观察对象

Angular 2 Observables

javascript

http

promise

observable

angular