Angular запуска кода без получения ответа от сервера - PullRequest
Новая
       11

Angular запуска кода без получения ответа от сервера

0 голосов
/ 24 октября 2019

Я хочу взять данные с 6 страниц сервера: с https://swapi.co/api/planets/?page=1 до https://swapi.co/api/planets/?page=6

Я планировал сделать это таким образом ...

Итак, вот мой компонент: 

import { Component, OnInit } from '@angular/core';
import {DataArr, PlanetDataService, PlanetInfoList} from '../services/planet-data.service';
import {Subscription} from 'rxjs';

@Component({
  selector: 'app-data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss']
})
export class DataListComponent implements OnInit {

  sub: Subscription
  loading = false
  tempList: DataArr
  planetInfoList: PlanetInfoList[] = []
  nextRequest = 'https://swapi.co/api/planets/?page=1'
  i = 0

  constructor(private planetDataService: PlanetDataService){}
  ngOnInit() {
    this.fetchPlanets()
  }

  fetchPlanets() {
    this.loading = true
    while (this.i !== 3) {
    this.sub = this.planetDataService.getPlanetsData(this.nextRequest)
        .subscribe(planetData => {
          this.tempList = planetData
          console.log(this.tempList)
          this.nextRequest = this.tempList.next
          console.log('Served: ', this.nextRequest)
          this.planetInfoList = this.planetInfoList.concat(this.tempList.results)
          console.log('planet info', this.planetInfoList)
      })
      this.sub.unsubscribe()
      this.i++
    }
    this.loading = false
  }

}

, и это мой сервис: 

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

export interface PlanetInfoList {
  name: string,
  rotation_period: number,
  orbital_period: number,
  diameter: number,
  climate: string,
  gravity: string,
  terrain: string,
  surface_water: number,
  population: number,
  residents: string[],
  created: string[],
  edited: string,
  url: string
}

export interface DataArr {
  next: string,
  previous: string,
  results: PlanetInfoList[],
  length: number
}

@Injectable({
  providedIn: 'root'
})
export class PlanetDataService {

  constructor(private http: HttpClient) {}

  getPlanetsData(nextRequest: string): Observable<DataArr> {
      return this.http.get<DataArr>(`${nextRequest}`)
  }
}

Проблема, с которой я столкнулся, заключается в том, что Angular не ждет, пока сервер ответит, и продолжает выполнениепетля. В результате, он отписывается до того, как получит что-то от сервера. Пожалуйста, дайте мне знать, как исправить это или, возможно, другой способ получить эти данные с сервера. Заранее спасибо!

...