HTTP 요청 보내기

http.get<Config>('/api/config').subscribe((config) => {
  // 설정을 처리합니다.
});

http.get('/images/dog.jpg', {responseType: 'arraybuffer'}).subscribe((buffer) => {
  console.log('The image is ' + buffer.byteLength + ' bytes large');
});

http.post<Config>('/api/config', newConfig).subscribe((config) => {
  console.log('Updated config:', config);
});

http
  .get('/api/config', {
    params: {filter: 'all'},
  })
  .subscribe((config) => {
    // ...
  });

const baseParams = new HttpParams().set('filter', 'all');

http
  .get('/api/config', {
    params: baseParams.set('details', 'enabled'),
  })
  .subscribe((config) => {
    // ...
  });

import {HttpClient, HttpParams, HttpParameterCodec} from '@angular/common/http';
import {inject} from '@angular/core';

export class CustomHttpParamEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

export class ApiService {
  private http = inject(HttpClient);

  search() {
    const params = new HttpParams({
      encoder: new CustomHttpParamEncoder(),
    })
      .set('email', 'dev+alerts@example.com')
      .set('q', 'a & b? c/d = e');

    return this.http.get('/api/items', {params});
  }
}

http
  .get('/api/config', {
    headers: {
      'X-Debug-Level': 'verbose',
    },
  })
  .subscribe((config) => {
    // ...
  });

const baseHeaders = new HttpHeaders().set('X-Debug-Level', 'minimal');

http
  .get<Config>('/api/config', {
    headers: baseHeaders.set('X-Debug-Level', 'verbose'),
  })
  .subscribe((config) => {
    // ...
  });

http.get<Config>('/api/config', {observe: 'response'}).subscribe((res) => {
  console.log('Response status:', res.status);
  console.log('Body:', res.body);
});

http
  .get('/api/download', {
    reportDownloadProgress: true,
    observe: 'events',
  })
  .subscribe((event) => {
    switch (event.type) {
      case HttpEventType.DownloadProgress:
        console.log('Downloaded ' + event.loaded + ' out of ' + event.total + ' bytes');
        break;
      case HttpEventType.Response:
        console.log('Finished downloading!');
        break;
    }
  });

http
  .get('/api/config', {
    timeout: 3000,
  })
  .subscribe({
    next: (config) => {
      console.log('Config fetched successfully:', config);
    },
    error: (err) => {
      // 요청 시간이 초과되면 에러가 전달됩니다.
    },
  });

http
  .post('/api/analytics', analyticsData, {
    keepalive: true,
  })
  .subscribe();

// 최신 여부와 관계없이 캐시된 응답을 사용합니다.
http
  .get('/api/config', {
    cache: 'force-cache',
  })
  .subscribe((config) => {
    // ...
  });

// 캐시를 건너뛰고 항상 네트워크에서 가져옵니다.
http
  .get('/api/live-data', {
    cache: 'no-cache',
  })
  .subscribe((data) => {
    // ...
  });

// 캐시된 응답만 사용하며, 캐시에 없으면 실패합니다.
http
  .get('/api/static-data', {
    cache: 'only-if-cached',
  })
  .subscribe((data) => {
    // ...
  });

// 중요한 리소스에는 높은 우선순위를 지정합니다.
http
  .get('/api/user-profile', {
    priority: 'high',
  })
  .subscribe((profile) => {
    // ...
  });

// 덜 중요한 리소스에는 낮은 우선순위를 지정합니다.
http
  .get('/api/recommendations', {
    priority: 'low',
  })
  .subscribe((recommendations) => {
    // ...
  });

// 자동 우선순위(기본값)에서는 브라우저가 결정합니다.
http
  .get('/api/settings', {
    priority: 'auto',
  })
  .subscribe((settings) => {
    // ...
  });

// 동일 출처 요청만 허용합니다.
http
  .get('/api/local-data', {
    mode: 'same-origin',
  })
  .subscribe((data) => {
    // ...
  });

// CORS를 사용하는 교차 출처 요청입니다.
http
  .get('https://api.external.com/data', {
    mode: 'cors',
  })
  .subscribe((data) => {
    // ...
  });

// 단순 교차 출처 요청에 No-CORS 모드를 사용합니다.
http
  .get('https://external-api.com/public-data', {
    mode: 'no-cors',
  })
  .subscribe((data) => {
    // ...
  });

// 리다이렉트를 자동으로 따릅니다(기본 동작).
http
  .get('/api/resource', {
    redirect: 'follow',
  })
  .subscribe((data) => {
    // ...
  });

// 자동 리다이렉트를 방지합니다.
http
  .get('/api/resource', {
    redirect: 'manual',
  })
  .subscribe((response) => {
    // 리다이렉트를 직접 처리합니다.
  });

// 리다이렉트를 에러로 처리합니다.
http
  .get('/api/resource', {
    redirect: 'error',
  })
  .subscribe({
    next: (data) => {
      // 성공 응답입니다.
    },
    error: (err) => {
      // 리다이렉트 응답은 이 에러 핸들러를 실행합니다.
    },
  });

// 교차 출처 요청에 인증 정보를 포함합니다.
http
  .get('https://api.example.com/protected-data', {
    credentials: 'include',
  })
  .subscribe((data) => {
    // ...
  });

// 인증 정보를 보내지 않습니다(교차 출처 요청의 기본 동작).
http
  .get('https://api.example.com/public-data', {
    credentials: 'omit',
  })
  .subscribe((data) => {
    // ...
  });

// 동일 출처 요청에만 인증 정보를 보냅니다.
http
  .get('/api/user-data', {
    credentials: 'same-origin',
  })
  .subscribe((data) => {
    // ...
  });

// withCredentials가 credentials 설정보다 우선합니다.
http
  .get('https://api.example.com/data', {
    credentials: 'omit', // 이 값은 무시됩니다.
    withCredentials: true, // credentials: 'include'로 동작하도록 강제합니다.
  })
  .subscribe((data) => {
    // credentials: 'omit'을 지정했지만 요청에 인증 정보가 포함됩니다.
  });

// 이전 방식도 계속 지원합니다.
http
  .get('https://api.example.com/data', {
    withCredentials: true,
  })
  .subscribe((data) => {
    // credentials: 'include'와 같습니다.
  });

// 지정한 리퍼러 URL을 보냅니다.
http
  .get('/api/data', {
    referrer: 'https://example.com/page',
  })
  .subscribe((data) => {
    // ...
  });

// 현재 페이지를 리퍼러로 사용합니다(기본 동작).
http
  .get('/api/analytics', {
    referrer: 'about:client',
  })
  .subscribe((data) => {
    // ...
  });

// 현재 페이지와 관계없이 리퍼러 정보를 보내지 않습니다.
http
  .get('/api/data', {
    referrerPolicy: 'no-referrer',
  })
  .subscribe();

// 출처만 보냅니다(예: https://example.com).
http
  .get('/api/analytics', {
    referrerPolicy: 'origin',
  })
  .subscribe();

// SHA-256 해시로 응답 무결성을 검증합니다.
http
  .get('/api/script.js', {
    integrity: 'sha256-ABC123...',
    responseType: 'text',
  })
  .subscribe((script) => {
    // 스크립트 콘텐츠가 해시와 일치하는지 검증합니다.
  });

@Service()
export class UserService {
  private http = inject(HttpClient);

  getUser(id: string): Observable<User> {
    return this.http.get<User>(`/api/user/${id}`);
  }
}

import {AsyncPipe} from '@angular/common';
import {Component, input, inject, effect} from '@angular/core';
import {Observable} from 'rxjs';

@Component({
  imports: [AsyncPipe],
  template: `
    @if (user$ | async; as user) {
      <p>Name: {{ user.name }}</p>
      <p>Biography: {{ user.biography }}</p>
    }
  `,
})
export class UserProfile {
  userId = input.required<string>();
  user$!: Observable<User>;

  private userService = inject(UserService);

  constructor() {
    effect(() => {
      this.user$ = this.userService.getUser(this.userId());
    });
  }
}