자바스크립트 Fetch API

Hwanhoon KIM·2023년 5월 19일
FetchFetch APIJavaScript자바스크립트
0

JavaScript의 fetch 함수는 웹 API인 Fetch API를 사용하여 HTTP 요청을 보내고 응답을 처리하는 기능을 제공합니다. fetch 함수는 비동기적으로 작동하며, Promise 객체를 반환합니다. 이를 통해 다음과 같은 방식으로 HTTP 요청을 처리할 수 있습니다:

fetch(url, options)
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 fetch 함수는 첫 번째 인자로 요청을 보낼 URL을, 두 번째 인자로는 옵션 객체를 받습니다. URL은 요청을 보낼 대상의 주소이며, 옵션 객체는 요청에 대한 설정을 담고 있습니다. 일반적으로 옵션 객체에는 메서드, 헤더, 요청 본문 등의 정보를 포함시킵니다.

fetch 함수는 서버로 요청을 보내고, 서버로부터 받은 응답을 나타내는 Response 객체를 Promise로 래핑하여 반환합니다. 이후 .then() 메서드를 사용하여 응답을 처리하거나 .catch() 메서드를 사용하여 오류를 처리할 수 있습니다.

예를 들어, GET 요청을 보내고 응답을 JSON 형식으로 처리하는 코드는 다음과 같습니다:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 response.json()은 Response 객체에서 JSON 형식의 응답 데이터를 추출하기 위해 사용됩니다. 이후 .then() 메서드를 사용하여 추출된 데이터를 처리할 수 있습니다.

fetch 함수는 다양한 종류의 HTTP 요청을 지원하며, GET, POST, PUT, DELETE 등의 메서드를 사용할 수 있습니다. 또한, 헤더 설정, 인증 정보 포함, 쿠키 사용 등 다양한 옵션을 지정할 수 있습니다.

GET

JavaScript의 fetch 함수를 사용하여 GET 요청을 보낼 수 있습니다. GET 요청은 서버로부터 데이터를 가져오는 용도로 사용되며, URL에 포함된 매개변수나 쿼리스트링을 통해 데이터를 전달할 수 있습니다.

GET 요청을 보내기 위해 fetch 함수를 사용하는 예시 코드는 다음과 같습니다:

fetch(url)
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 url은 GET 요청을 보낼 대상의 URL입니다. fetch 함수는 이 URL로 GET 요청을 보내고, 서버로부터 받은 응답을 나타내는 Response 객체를 Promise로 래핑하여 반환합니다.

응답을 처리하기 위해 .then() 메서드를 사용합니다. 첫 번째 .then() 블록에서는 response.ok 속성을 확인하여 응답이 성공적으로 도착했는지를 확인합니다. 만약 응답이 성공적이라면 response.json()을 호출하여 JSON 형식의 데이터를 추출합니다. 이후 .then() 메서드에서 추출된 데이터를 처리할 수 있습니다.

GET 요청에서는 주로 URL에 매개변수를 추가하여 데이터를 전달합니다. 예를 들어, https://api.example.com/data?param1=value1&param2=value2와 같은 형태로 URL에 매개변수를 포함시킬 수 있습니다. 서버에서는 매개변수를 읽어 해당하는 데이터를 반환할 수 있습니다.

매개변수를 포함한 GET 요청을 보내는 예시 코드는 다음과 같습니다:

const params = {
  param1: 'value1',
  param2: 'value2'
};

const url = new URL('https://api.example.com/data');
url.search = new URLSearchParams(params).toString();

fetch(url)
  .then(response => {
    // ...
  })
  .then(data => {
    // ...
  })
  .catch(error => {
    // ...
  });

위의 코드에서 params 객체는 매개변수를 나타내며, URL과 URLSearchParams를 사용하여 매개변수를 URL에 추가합니다. 이후 fetch 함수를 호출할 때 해당 URL을 전달하여 GET 요청을 보냅니다.

이렇게 fetch 함수를 사용하여 GET 요청을 보내고 응답을 처리할 수 있습니다. 이때 주의할 점은 fetch 함수가 Promise를 반환하므로, 응답을 처리하기 위해 .then() 메서드를 체인으로 연결하여 사용해야 한다는 것입니다.

POST

JavaScript의 fetch 함수를 사용하여 POST 요청을 보낼 수 있습니다. POST 요청은 서버로 데이터를 전송하고자 할 때 사용되며, 요청 본문에 데이터를 포함시켜 전송합니다.

POST 요청을 보내기 위해 fetch 함수를 사용하는 예시 코드는 다음과 같습니다:

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(data => {
    // 응답 데이터 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 url은 POST 요청을 보낼 대상의 URL입니다. fetch 함수의 두 번째 인자로는 옵션 객체를 전달합니다. 이 객체는 요청에 대한 설정을 담고 있습니다.

POST 요청에서는 method 속성을 'POST'로 설정하여 POST 메서드를 사용합니다. headers 속성을 통해 요청 헤더를 설정할 수 있으며, Content-Type 헤더를 'application/json'과 같이 설정하여 요청 본문이 JSON 형식임을 서버에 알립니다.

데이터를 요청 본문에 포함시키기 위해 body 속성에 데이터를 JSON 형식으로 직렬화한 후 전달합니다. 이를 위해 JSON.stringify() 함수를 사용하여 JavaScript 객체나 배열을 JSON 문자열로 변환합니다.

응답을 처리하기 위해 .then() 메서드를 사용합니다. 첫 번째 .then() 블록에서는 response.ok 속성을 확인하여 응답이 성공적으로 도착했는지를 확인합니다. 응답이 성공적이라면 response.json()을 호출하여 JSON 형식의 응답 데이터를 추출합니다.

POST 요청에서는 서버에서 보내주는 응답 데이터를 처리할 수 있습니다. 응답 데이터는 .then() 메서드의 두 번째 블록에서 처리됩니다.

이렇게 fetch 함수를 사용하여 POST 요청을 보내고 응답을 처리할 수 있습니다. POST 요청은 서버에 데이터를 전송하는 용도로 사용되므로, 요청 본문에 적절한 데이터를 포함시켜야 합니다. 서버에서는 해당 데이터를 읽어 처리하고 응답을 반환할 수 있습니다.

PUT

JavaScript의 fetch 함수를 사용하여 PUT 요청을 보낼 수 있습니다. PUT 요청은 서버의 리소스를 업데이트하고자 할 때 사용됩니다.

PUT 요청을 보내기 위해 fetch 함수를 사용하는 예시 코드는 다음과 같습니다:

fetch(url, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(data => {
    // 응답 데이터 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 url은 PUT 요청을 보낼 대상의 URL입니다. fetch 함수의 두 번째 인자로는 옵션 객체를 전달합니다. 이 객체는 요청에 대한 설정을 담고 있습니다.

PUT 요청에서는 method 속성을 'PUT'로 설정하여 PUT 메서드를 사용합니다. headers 속성을 통해 요청 헤더를 설정할 수 있으며, Content-Type 헤더를 'application/json'과 같이 설정하여 요청 본문이 JSON 형식임을 서버에 알립니다.

데이터를 요청 본문에 포함시키기 위해 body 속성에 데이터를 JSON 형식으로 직렬화한 후 전달합니다. 이를 위해 JSON.stringify() 함수를 사용하여 JavaScript 객체나 배열을 JSON 문자열로 변환합니다.

응답을 처리하기 위해 .then() 메서드를 사용합니다. 첫 번째 .then() 블록에서는 response.ok 속성을 확인하여 응답이 성공적으로 도착했는지를 확인합니다. 응답이 성공적이라면 response.json()을 호출하여 JSON 형식의 응답 데이터를 추출합니다.

PUT 요청에서는 서버에서 보내주는 응답 데이터를 처리할 수 있습니다. 응답 데이터는 .then() 메서드의 두 번째 블록에서 처리됩니다.

이렇게 fetch 함수를 사용하여 PUT 요청을 보내고 응답을 처리할 수 있습니다. PUT 요청은 서버의 리소스를 업데이트하는 용도로 사용되므로, 요청 본문에 업데이트할 데이터를 포함시켜야 합니다. 서버에서는 해당 데이터를 읽어 리소스를 업데이트하고 응답을 반환할 수 있습니다

PUT 요청을 보내기 위해 fetch 함수를 사용하는 예시 코드는 다음과 같습니다:

fetch(url, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .then(data => {
    // 응답 데이터 처리
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드에서 url은 PUT 요청을 보낼 대상의 URL입니다. fetch 함수의 두 번째 인자로는 옵션 객체를 전달합니다. 이 객체는 요청에 대한 설정을 담고 있습니다.

PUT 요청에서는 method 속성을 'PUT'로 설정하여 PUT 메서드를 사용합니다. headers 속성을 통해 요청 헤더를 설정할 수 있으며, Content-Type 헤더를 'application/json'과 같이 설정하여 요청 본문이 JSON 형식임을 서버에 알립니다.

데이터를 요청 본문에 포함시키기 위해 body 속성에 데이터를 JSON 형식으로 직렬화한 후 전달합니다. 이를 위해 JSON.stringify() 함수를 사용하여 JavaScript 객체나 배열을 JSON 문자열로 변환합니다.

응답을 처리하기 위해 .then() 메서드를 사용합니다. 첫 번째 .then() 블록에서는 response.ok 속성을 확인하여 응답이 성공적으로 도착했는지를 확인합니다. 응답이 성공적이라면 response.json()을 호출하여 JSON 형식의 응답 데이터를 추출합니다.

PUT 요청에서는 서버에서 보내주는 응답 데이터를 처리할 수 있습니다. 응답 데이터는 .then() 메서드의 두 번째 블록에서 처리됩니다.

이렇게 fetch 함수를 사용하여 PUT 요청을 보내고 응답을 처리할 수 있습니다. PUT 요청은 서버의 리소스를 업데이트하는 용도로 사용되므로, 요청 본문에 업데이트할 데이터를 포함시켜야 합니다. 서버에서는 해당 데이터를 읽어 리소스를 업데이트하고 응답을 반환할 수 있습니다.

DELETE

JavaScript의 fetch 함수를 사용하여 DELETE 요청을 보낼 수 있습니다. DELETE 요청은 서버의 리소스를 삭제하고자 할 때 사용됩니다.

DELETE 요청을 보내기 위해 fetch 함수를 사용하는 예시 코드는 다음과 같습니다:

const url = 'https://api.example.com/resource/123'; // DELETE 요청을 보낼 대상 URL

fetch(url, {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Resource deleted successfully.');
    } else {
      throw new Error('Network response was not ok.');
    }
  })
  .catch(error => {
    // 오류 처리
    console.error('Error:', error);
  });

위의 예시 코드에서는 url 변수에 DELETE 요청을 보낼 대상 URL을 지정합니다.

fetch 함수의 두 번째 인자로 옵션 객체를 전달하여 DELETE 요청에 대한 설정을 지정합니다. 여기서는 method 속성을 'DELETE'로 설정하여 DELETE 메서드를 사용합니다.

응답을 처리하기 위해 .then() 메서드를 사용합니다. 첫 번째 .then() 블록에서는 response.ok 속성을 확인하여 응답이 성공적으로 도착했는지를 확인합니다. 응답이 성공적이라면 삭제 작업이 성공적으로 이루어졌음을 나타내는 메시지를 출력합니다.

오류 처리를 위해 .catch() 메서드를 사용하여 오류를 처리하는 코드도 추가되어 있습니다.

위의 예시 코드를 참고하여 DELETE 요청을 보내고 응답을 처리할 수 있습니다. DELETE 요청은 서버의 리소스를 삭제하는 용도로 사용되며, 요청을 보낼 대상 URL을 지정하여 해당 리소스를 삭제합니다. 서버에서는 삭제 작업을 수행하고 성공 여부에 따라 응답을 반환할 수 있습니다.

profile
Hwanhoon KIM
Fullstack Developer, I post about HTML, CSS(SASS, LESS), JavaScript, React, Next, TypeScript.
이전 포스트

vs code에서 한글자판으로 ctrl+₩을 누르면 작동이 안되는 증상 해결법

다음 포스트

주간 회고(WIL) 1주차

0개의 댓글