HttpClient 'GET' - 각도 단순화

이봐, 친구들.

오늘 저는 API를 호출하는 Angular의 방법을 분석하고 싶습니다. 각 CRUD 작업에 대한 기사를 작성할 예정이므로 눈을 떼지 말고 팔로우하십시오!
이것이 기본이며 Angular 웹 사이트에서 자세한 정보를 찾을 수 있습니다. 나는 여기서 일이 왜 그리고 어떻게 작동하는지에 대한 핵심에 들어가지 않을 것입니다. 초보자로서 때때로 너무 많은 정보는 나쁜 것입니다. 그러니 간단하게 시작해서 거기에서 성장해 봅시다!

1 단계:

가져올 시간입니다!

app.module 파일에서...

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, <-- add to imports here
  ],

.ts 파일에서...

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

2 단계:

다음으로 생성자에 추가해야 합니다.

.ts 파일에서...

constructor(private http: HttpClient) {}

3단계:

이제 API를 호출할 시간입니다!

다음은 우리의 주요 기능입니다. get 괄호 안에는 URL 또는 보내야 할 모든 것을 넣을 것입니다. 실제로 우리를 서비스에 연결하기 위해 구독을 고려하십시오. 당신이 그것을 가지고 있지 않다면, 우리는 이 기능을 켤 힘이 없을 것입니다. 그것은 우리가 다른 곳에서 사용할 수 있도록 우리에게 필요한 데이터를 돌려줄 것입니다.

functionName() {
 this.http.get().subscribe()
}

이제 URL을 추가하십시오.

myUrl = 'https://www.heythisiscool.com/1'
functionName() {
 this.http.get(myUrl).subscribe()
}

다음으로 구독 괄호에서 작업을 수행할 수 있습니다. console.log를 통해 무엇을 얻었는지 확인할 수 있습니다.

functionName() {
 this.http.get(myUrl).subscribe(data => {console.log(data)}
}

또는 변수에 데이터를 넣을 수 있습니다.

myVariable;

functionName() {
 this.http.get(myUrl).subscribe(data => {myVariable = data})
}

구독에서 여러 작업을 수행할 수도 있습니다. 이러한 일은 호출이 완료될 때까지 발생하지 않으므로 많은 상황에서 편리합니다.

myVariable;

functionName() {
this.http.get(myUrl).subscribe(data => {
  myVariable = data,
  console.log(data),
  callAnotherFunction(),
  setAVariable = true
  }
}

get 요청과 관련하여 다루어야 할 다른 많은 것들이 있으므로 앞으로 많은 사람들이 핵심을 따라야 할 것입니다!

행운을 빕니다,
줄리