[javascript] Angular에서의 자바스크립트 AJAX 요청 처리 방법

21 Dec 2023

javascript

Angular는 HTTP 클라이언트 모듈을 제공하여 서버에서 데이터를 가져오는 데 사용됩니다. 이 모듈을 사용하여 AJAX 요청을 처리할 수 있습니다. 다음은 Angular에서 자바스크립트 AJAX 요청을 처리하는 방법에 대한 예시입니다.

1. HttpClientModule를 사용하여 모듈 설정

Angular 애플리케이션에서 AJAX 요청을 처리하기 위해서는 HttpClientModule를 사용하여 모듈을 설정해야 합니다. AppModule에서 HttpClientModule를 import하고, imports 배열에 HttpClientModule를 추가합니다.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // HttpClientModule import 추가

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // HttpClientModule 추가
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. HTTP 클라이언트를 사용하여 AJAX 요청 전송

이제 HttpClientModule를 사용하여 HTTP 클라이언트를 주입하고, 이를 이용하여 AJAX 요청을 전송할 수 있습니다. 아래는 컴포넌트에서 HTTP 클라이언트를 사용하여 GET 요청을 보내는 예시입니다.

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  fetchData() {
    return this.http.get('https://api.example.com/data');
  }
}

위 코드에서 HttpClient를 주입하고 get 메서드를 사용하여 요청을 보냅니다.

3. 요청 응답 처리

마지막으로, AJAX 요청에 대한 응답을 처리할 수 있습니다. 컴포넌트에서 DataService를 주입하고, 응답을 처리하는 메서드를 구현할 수 있습니다.

// data.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  responseData: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.fetchData().subscribe((data) => {
      this.responseData = data;
      // 응답 데이터 처리
    });
  }
}

위 코드에서는 fetchData 메서드를 통해 데이터를 가져오고 응답을 subscribe 메서드를 사용하여 처리합니다.

위의 예시를 따라 Angular에서 자바스크립트 AJAX 요청을 처리하는 방법을 알아보았습니다.

참고 자료

Angular HTTP Guide