Angular 订阅从 API 返回的数据

Question

我正在尝试清理我的 Ionic 应用程序并将冗余功能移动到提供程序中。下面是我的大多数 API 函数的示例（为了简洁起见，我删除了很多不相关的东西）并且它们运行良好。

getDataFromApi() {
    ....
    Promise.all([
        ...
    ]).then((result) => {
        let headers = new Headers();
        ...
        let body = new FormData();
        ...
        this.http.post(url, body, headers)
            .map(res => res.json())
            .subscribe(data => {
                if (data == '{}') {
                    this.mydata = [];
                } else {
                    this.mydata = data;
                }
            }, error => { });
    });
}

所以我所做的就是将函数移到提供程序中并像这样进行更改

getDataFromApi() {
    ....
    Promise.all([
        ...
    ]).then((result) => {
        let headers = new Headers();
        ...
        let body = new FormData();
        ...
        return this.http.post(url, body, headers));
    });
}

然后在页面的构造函数中我这样称呼它

this.service.getDataFromApi()
    .map(res => res.json())
    .subscribe(data => {
        if (data == '{}') {
            this.mydata = [];
        } else {
            this.mydata = data;
        }
    }, error => { });

显然这是行不通的。我已经倾注了 2 天的 SO 帖子，也无法获得其他人的示例和答案以正常工作。我已经尝试在提供程序中进行映射并在页面中调用它时进行订阅，但无论我尝试什么，都会不断收到错误。我知道这个函数正在返回数据，因为我可以在将它移动到提供程序之前看到它。

我做错了什么？

Answer 1

我认为最重要的是保持一致；您可以使用 only 承诺或使用 only observables 来完成所有这些操作（而不是混合使用两者）。

请查看 this stackblitz demo，您可以在其中了解如何仅使用 observables 发出类似的 HTTP 请求，以及仅使用 Promise 发出完全相同的请求。

---

使用可观察对象

您可以将switchMap（或任何其他展平运算符）与fromPromise 一起使用，以从您的提供者处以相同的方法处理所有这些：

// Angular
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// RxJS 
// Please notice that this demo uses the 5.5.2 version
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators/map';
import { tap } from 'rxjs/operators/tap';
import { switchMap } from 'rxjs/operators/switchMap';

// ...

// Get a list of 5 users using observables
public getDataUsingObservables(): Observable<any> {
  const promises = Promise.all([
    this.somePromise('getDataUsingObservables', 1),
    this.somePromise('getDataUsingObservables', 2)
  ]);

  return fromPromise(promises)
    .pipe(
      switchMap(results => {
        console.log(`[getDataUsingObservables]: Both promises are finished`);
        const url = `https://randomuser.me/api/?results=5`;

        return this.http.get<any>(url);
      }),
      tap(res => {
        console.log(`[getDataUsingObservables]: The http request is finished`);
      })
  );
}

// Return a promise with the number sent as parameter 
private somePromise(callerMethod: string, aNumber: number): Promise<number> {
  console.log(`[${callerMethod}]: About to create a promise with the number ${aNumber}`);
  return Promise.resolve(aNumber);
}

然后你会像这样使用它：

this.dataService.getDataUsingObservables().subscribe(
  response => {
    this.responseUsingObservables = response;
  }, 
  error => {
    // Handle the error...
    alert(error);
  });

---

使用承诺

如果你想使用promise，你可以使用toPromise()操作符将observable转化为promise：

// Angular
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// RxJS 
// Please notice that this demo uses the 5.5.2 version
import { tap } from 'rxjs/operators/tap';

// ...

// Get a list of 5 users using promises
public getDataUsingPromises(): Promise<any> {
  const promises = Promise.all([
      this.somePromise('getDataUsingPromises', 1),
      this.somePromise('getDataUsingPromises', 2)
  ]);

  return promises
    .then(results => {
      console.log(`[getDataUsingPromises]: Both promises are finished`);
      const url = `https://randomuser.me/api/?results=5`;

      return this.http.get<any>(url)
        .pipe(
          tap(res => {
            console.log(`[getDataUsingPromises]: The http request is finished`);
          })
        )
        .toPromise();
    });
}

// Return a promise with the number sent as parameter 
private somePromise(callerMethod: string, aNumber: number): Promise<number> {
  console.log(`[${callerMethod}]: About to create a promise with the number ${aNumber}`);
  return Promise.resolve(aNumber);
}

然后你会像这样使用它：

this.dataService.getDataUsingPromises()
  .then(response => {
    this.responseUsingPromises = response;
  })
  .catch(error => {
    // Handle the error...
    alert(error);
  });

Answer 2

免责声明：可能/应该有一种方法可以在 observables 中实现完全相同的概念，但我对它们不太熟悉，所以也许有人可以详细说明。

你的函数应该返回一个承诺，这意味着你会这样做

getDataFromApi() {
    ....
    return Promise.all([
        ...
    ]);
}

然后在调用函数的 then 部分实现它的逻辑。现在这并不好玩，因为您将复制您试图消除的代码。

为此，您的函数仍应返回一个承诺，该承诺在您想要的 return 语句之后解析，如下所示：

getDataFromApi() {
  ....
  new Promise((resolve, reject) => {
    Promise.all([
      ...
    ]).then(result => {
      const headers = new Headers();
      ...
      const body = new FormData();
      ...
      // This is equavilent to your desired return
      resolve(this.http.post(url, body, headers));
    });
  });
}

然后在调用者then 块中实现 POST 订阅，如下所示：

this.service.getDataFromApi()
  .then(observ => {
    observ.subscribe(result => {
    // Use your response here
    });
  });

你甚至可以使用异步函数，这在代码中会更容易，而不是将函数包装在一个新的 Promise 中，你可以只在 Promise.all 上使用 await，然后是随后的 return将被翻译成为你解决的承诺。

编辑： 更好的是，如果您每次只订阅 JSON 数据，并希望它返回，则可以推广该概念以使调用者中的代码更简洁：

this.service.getDataFromApi().then(finalData => {
  // This is the final returned data ...
}, (err) => {
//allows error to be handled
});

这可以通过在订阅块的providers方法中解析promise来实现，如下所示：

getDataFromApi() {
  return new Promise((resolve, reject) => {
    Promise.all([...]).then(result => {
      const headers = new Headers();
      const body = new FormData();
      this.http
        .post(url, body, headers)
        .map(res => res.json())
        .subscribe(data => {
          if (data == '{}') {
            reject([]);
          } else {
            resolve(data);
          }
        });
    });  
  })
}