18.2. 프로그램언어 자바스크립트(JavaScript)에서의 API 응답 다루기

by

프로그램언어 자바스크립트(JavaScript)에서의 서버 응답 상태 코드 이해

서버 응답 상태 코드는 클라이언트가 서버에 요청을 보내고 서버가 그 요청에 대한 응답을 전달할 때 함께 전송되는 숫자 코드입니다. 이 코드는 요청이 성공했는지, 실패했는지, 그 이유가 무엇인지 등을 나타내는 중요한 정보를 제공합니다.

예를 들어, 200번대 코드는 성공을 나타내며, 400번대 코드는 클라이언트 오류를, 500번대 코드는 서버 오류를 나타냅니다. 이러한 상태 코드를 이해하면 개발자는 요청이 올바르게 처리되었는지를 파악하고 적절한 조치를 취할 수 있습니다.

아래는 JavaScript에서 서버 응답 상태 코드를 처리하는 예제 코드입니다. 


fetch('https://api.example.com/data')
    .then(response => {
        if (response.ok) {
            // 성공적인 응답 처리
            console.log('요청이 성공했습니다.');
        } else {
            // 오류 응답 처리
            console.log('요청이 실패했습니다. 상태 코드: ' + response.status);
        }
    })
    .catch(error => {
        // 네트워크 오류 처리
        console.error('네트워크 오류: ' + error);
    });

프로그램언어 자바스크립트(JavaScript)에서의 Response 객체와 그 메소드들

JavaScript의 Response 객체와 메소드

JavaScript에서 Response 객체는 네트워크 요청에 대한 응답을 나타내는데 사용됩니다. 이 객체는 fetch API나 XMLHttpRequest를 통해 받은 응답을 다루는 데 유용합니다.

Response 객체의 주요 메소드는 다음과 같습니다:

  • Response.text(): 응답을 텍스트 형식으로 반환합니다.
  • Response.json(): 응답을 JSON 형식으로 파싱하여 반환합니다.
  • Response.blob(): 응답을 Blob(Binary Large Object) 형식으로 반환합니다.
  • Response.arrayBuffer(): 응답을 ArrayBuffer 형식으로 반환합니다.
  • Response.formData(): 응답을 FormData 객체로 반환합니다.

아래는 Response 객체의 메소드를 사용한 예제 코드입니다:


fetch('https://api.example.com/data')
    .then(response => response.text())
    .then(data => {
        console.log(data);
    });

이 예제는 fetch를 사용하여 API에서 데이터를 가져온 후, Response 객체의 text() 메소드를 사용하여 텍스트 형식으로 변환한 뒤 데이터를 콘솔에 출력하는 방법을 보여줍니다.

프로그램언어 자바스크립트(JavaScript)의 JSON 응답 데이터 처리 방법

프로그램언어 자바스크립트(JavaScript)에서 JSON 응답 데이터를 처리하는 방법은 다음과 같습니다.

JSON(JavaScript Object Notation)은 데이터를 효율적으로 교환하기 위한 경량의 데이터 형식입니다. 웹 애플리케이션에서 서버로부터 받은 JSON 응답 데이터를 처리하려면 다음과 같은 단계를 거칩니다.

  1. JSON 데이터 파싱: JSON 데이터를 자바스크립트 객체로 변환하는 과정
  2. 데이터 접근: 변환된 자바스크립트 객체에서 필요한 데이터에 접근
  3. 데이터 활용: 접근한 데이터를 활용하여 원하는 작업 수행

아래는 간단한 예제 코드를 통해 JSON 응답 데이터를 처리하는 방법을 보여드리겠습니다.


// 예제 JSON 응답 데이터
const jsonResponse = '{"name": "John", "age": 30, "city": "New York"}';

// JSON 데이터 파싱
const data = JSON.parse(jsonResponse);

// 데이터 접근
const name = data.name;
const age = data.age;
const city = data.city;

// 데이터 활용
console.log(`Name: ${name}`);
console.log(`Age: ${age}`);
console.log(`City: ${city}`);

프로그램언어 자바스크립트(JavaScript)에서의 에러 핸들링 방법

에러 핸들링은 프로그램을 개발할 때 중요한 부분 중 하나입니다. 자바스크립트에서도 에러 핸들링을 효과적으로 수행할 수 있습니다. 주요한 방법으로는 try-catch 문을 사용하는 것이 있습니다.

try-catch 문은 코드 블록 내에서 발생하는 에러를 캐치하여 적절히 처리할 수 있도록 도와줍니다. try 블록 내에서 예외가 발생하면 catch 블록이 실행되어 예외를 처리합니다.

아래는 try-catch 문을 사용한 예제 코드입니다.


try {
    // 예외가 발생할 수 있는 코드
    let x = y; // y가 정의되지 않았기 때문에 ReferenceError 발생
} catch (error) {
    // 예외가 발생했을 때 실행되는 코드
    console.log('에러가 발생했습니다: ' + error.message);
}

위 예제에서는 try 블록 내에서 y라는 변수를 사용하려고 했지만 정의되지 않아 ReferenceError가 발생합니다. 이때 catch 블록이 실행되어 에러를 처리하고 에러 메시지를 출력합니다.

try-catch 문을 사용하면 예외가 발생했을 때 프로그램이 강제 종료되는 것을 방지하고, 사용자에게 적절한 안내를 제공할 수 있습니다. 에러 핸들링은 안정성과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

프로그램언어 자바스크립트(JavaScript)에서의 Headers 객체와 요청/응답 헤더 다루기

자바스크립트(JavaScript)에서의 Headers 객체는 HTTP 요청 및 응답 헤더를 다루는 데 사용됩니다. 이 객체를 사용하면 헤더를 추가, 수정, 삭제할 수 있어서 네트워크 통신을 더욱 세밀하게 제어할 수 있습니다.

Headers 객체를 사용하여 요청 헤더를 설정하려면 다음과 같이 작성할 수 있습니다.


const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer token123');

위의 예제에서는 Content-Type과 Authorization 헤더를 추가하는 방법을 보여줍니다. append 메서드를 사용하여 헤더를 추가할 수 있습니다.

응답 헤더를 다루는 경우에는 fetch API를 사용하여 요청을 보내고, 응답 객체의 headers 속성을 통해 헤더에 접근할 수 있습니다.


fetch('https://api.example.com/data')
  .then(response => {
    const contentType = response.headers.get('Content-Type');
    console.log(contentType);
  });

위의 예제에서는 fetch를 사용하여 데이터를 요청하고, 응답 객체의 headers 속성을 사용하여 Content-Type 헤더를 가져오는 방법을 보여줍니다. get 메서드를 사용하여 특정 헤더 값을 가져올 수 있습니다.

Leave a Comment