JavaScript - 合并两个 API 调用的结果

Question

我有一个简单的 Angular 组件 (Ionic)，它可以：

1. 获取一些数据的 API 调用（作为 Observable 返回）和
2. 从存储在设备上的 SQLite 数据库获取数据（作为 Promise 返回）

我正在尝试合并这两个结果。

这是我的组件：

import { Component, OnInit, Output } from '@angular/core';
import { merge } from 'rxjs';
import { Fact } from '../fact';
import { Label } from '../label';
import { DashboardService } from '../services/dashboard.service';
import { DatabaseService } from '../services/database.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {
  rows: Fact[];
  labels: Label[];

  constructor(
    private dashboardService: DashboardService,
    private database: DatabaseService
  ) {
    this.refreshDashboard();
  }

  ngOnInit() {}

  refreshDashboard() {
    console.log('refreshing...');
    this.getDashboardData();
    // Get labels
    this.database
      .createDatabase()
      .then(() => {
        this.getLabels();
      })
      .then(() => {            
        console.log(this.rows.length); // ******* UNDEFINED *******
        console.log(this.labels.length); // ******* UNDEFINED *******
      });
  }

  // Coming from an API call, which returns an Observable
  getDashboardData() {
    this.dashboardService.getData().subscribe((data) => {
      this.rows = data;
    });
  }

  // Coming from local SQLite database
  getLabels() {
    this.database
      .getLabels()
      .then((data) => {
        this.labels = [];
        if (data.rows.length > 0) {
          for (let i = 0; i < data.rows.length; i++) {
            this.labels.push(data.rows.item(i));
          }
        }
      })
      .catch((e) => {
        alert('There was an error: ' + e);
      });
  }

  // mergeResults()
}

我无法弄清楚如何确保在 mergeResults() 中使用这两个变量 rows 和 labels 之前已填充它们。

Answer 1

then() 必须在顺序重要时嵌套。所以

  dosomething1.then( ()=> {
     dosomething2.then( () => {
       dosomething3.then( () => {
         console.log("hey");
                       })
                     })
                   })
                

在你的情况下，这意味着

 refreshDashboard() {
    console.log('refreshing...');
    this.getDashboardData();
    // Get labels
    this.database
      .createDatabase()
      .then(() => {
        this.getLabels();
      })
      .then(() => {  <---This here has no use at all. Nothing returns a promise here           
      });
  }

  // Coming from an API call, which returns an Observable
  getDashboardData() {
    this.dashboardService.getData().subscribe((data) => {
      this.rows = data;
    });
  }

  // Coming from local SQLite database
  getLabels() {
    this.database
      .getLabels()
      .then((data) => {
        this.labels = [];
        if (data.rows.length > 0) {
          for (let i = 0; i < data.rows.length; i++) {
            this.labels.push(data.rows.item(i));
          }
        }
        console.log(this.rows.length); // here you expect values to be ready
        console.log(this.labels.length); // here you expect values to be ready
      })
      .catch((e) => {
        alert('There was an error: ' + e);
      });