Angular : 서비스를 사용하여 서버에서 데이터를 가져 와서 배열에 저장하는 방법은 무엇입니까?

debugcn 에 게시 Dev

Mossi92

나는 호출하는 서비스가 PokéAPI을 시를 https://pokeapi.co/api/v2/pokemon/.

반환하려는 Pokemon을 지정하지 않으면 API는 Pokemon의 URL이 포함 된 페이지가 매겨진 리소스 목록을 반환합니다. https://pokeapi.co/docs/v2#pokemon-section

내 서비스의 로컬 배열 내에 해당 URL 목록을 저장하고 싶습니다.

나는 시도했다 :

getListOfPokemonUrls(): Observable<any> {
    return this.http.get<any>(this.pokeApiUrl)
      .pipe(
        map((response: any[]) => this.pokemonResources = response.results)
      );
  }

내 생성자에서 (테스트 목적으로) :

const y = this.getListOfPokemonUrls();

그러나 그 함수 this.pokemonResources배열을 넘어 서면 비어 있습니다.

크리스토퍼 페이 세렛

키 포인트

Observable로 작업 할 때는 반드시 subscribe().
서버 응답을 로컬 변수에 저장하는 대신 Observable을 구독하는 호출자가 데이터 처리 방법을 결정할 수 있도록 데이터를 반환하는 것을 선호합니다. 이는 비동기 프로세스가 완료되는 즉시 데이터를 즉시 사용할 수 있다는 장점이 있습니다.

Stackblitz 데모 작업을 참조하십시오 .

StackBlitz 데모에 대한 참고 사항

PokeAPIService생성자에서 PokeAPI 서버를 호출 하는 Angular 서비스 를 생성했습니다 .

  constructor(private http: HttpClient) {
    this.getListOfPokemonUrls().subscribe(
      (results: Array<Pokemon>) => {
        for(let p of results) {
          this.pokemons.push(p)
        }
      }
    )
  }

의 업데이트 된 구현은 getListOfPokemonURLs결과 를 반환하므로에 대한 호출 내에서 처리 할 수 있습니다 subscribe().

Pokemon및에 대해 정의 된 인터페이스 PokeAPIResponse:

export interface Pokemon {
  name: string,
  url: string
}


interface PokeAPIResponse {
  count: number,
  next: string,
  previous: string,
  results: Array<Pokemon>
}

업데이트 된 getListOfPokemonUrls()새로운 인터페이스 유형 및 수정 RxJS은 map되도록 response.results직접 반환됩니다.

 private getListOfPokemonUrls(): Observable<Array<Pokemon>> {
    return this.http.get<any>(POKEAPI_URL)
      .pipe(
        map((response: PokeAPIResponse) => response.results)
      );
  }

참고로 PokeAPI 서버 응답 :

curl https://pokeapi.co/api/v2/pokemon/

다음 응답을 반환합니다.

{
  "count":1050,
  "next":"https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20",
  "previous":null,
  "results":[
    {"name":"bulbasaur","url":"https://pokeapi.co/api/v2/pokemon/1/"},
    {"name":"ivysaur","url":"https://pokeapi.co/api/v2/pokemon/2/"},
    {"name":"venusaur","url":"https://pokeapi.co/api/v2/pokemon/3/"}, 
    {"name":"charmander","url":"https://pokeapi.co/api/v2/pokemon/4/"}, 
    {"name":"charmeleon","url":"https://pokeapi.co/api/v2/pokemon/5/"}, 
    {"name":"charizard","url":"https://pokeapi.co/api/v2/pokemon/6/"}, 
    {"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon/7/"},
...

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사