수정하기 - JavaScript에서 'fetch API'는 어떻게 사용하나요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

`fetch API`는 JavaScript에서 HTTP 요청을 보내고 응답을 받을 수 있는 현대적인 방법입니다. 이 API는 <a href='https://sangseek.com/sangseeks/Promise 기반/ko'>Promise 기반</a>으로 설계되어 있어 비동기 작업을 쉽게 처리할 수 있습니다. `fetch`는 주로 RESTful API와 상호작용할 때 사용되며, JSON 데이터를 주고받는 데 매우 유용합니다.           기본 사용법    `fetch` 함수는 URL을 인자로 받아 HTTP 요청을 보냅니다. 기본적으로 GET 요청을 수행하며, 추가적인 옵션을 통해 POST, PUT, DELETE 등의 요청도 할 수 있습니다.    ```javascript  fetch('https://api.example.com/data')    .then(response => {      if (!response.ok) {        throw new Error('Network response was not ok');      }      return response.json(); // JSON 형태로 변환    })    .then(data => {      console.log(data); // 데이터 처리    })    .catch(error => {      console.error('There has been a problem with your fetch operation:', error);    });  ```           POST 요청 보내기    POST 요청을 보내려면 `fetch`의 두 번째 인자로 옵션 객체를 전달해야 합니다. 이 객체에는 HTTP 메서드, 헤더, 바디 등의 정보를 포함할 수 있습니다.    ```javascript  fetch('https://api.example.com/data', {    method: 'POST',    headers: {      'Content-Type': 'application/json'    },    body: JSON.stringify({ key: 'value' }) // JSON 문자열로 변환  })    .then(response => {      if (!response.ok) {        throw new Error('Network response was not ok');      }      return response.json();    })    .then(data => {      console.log(data);    })    .catch(error => {      console.error('There has been a problem with your fetch operation:', error);    });  ```           PUT 및 DELETE 요청    PUT 및 DELETE 요청도 POST 요청과 유사하게 처리할 수 있습니다. 메서드만 변경하면 됩니다.    ```javascript  // PUT 요청 예시  fetch('https://api.example.com/data/1', {    method: 'PUT',    headers: {      'Content-Type': 'application/json'    },    body: JSON.stringify({ key: 'new value' })  })    .then(response => response.json())    .then(data => console.log(data))    .catch(error => console.error('Error:', error));    // DELETE 요청 예시  fetch('https://api.example.com/data/1', {    method: 'DELETE'  })    .then(response => {      if (!response.ok) {        throw new Error('Network response was not ok');      }      return response.json();    })    .then(data => console.log(data))    .catch(error => console.error('Error:', error));  ```           요청 취소하기    `fetch` API는 기본적으로 요청을 취소하는 기능을 제공하지 않지만, `<a href='https://sangseek.com/sangseeks/AbortController/ko'>AbortController</a>`를 사용하여 요청을 취소할 수 있습니다.    ```javascript  const controller = new AbortController();  const signal = controller.signal;    fetch('https://api.example.com/data', { signal })    .then(response => {      if (!response.ok) {        throw new Error('Network response was not ok');      }      return response.json();    })    .then(data => console.log(data))    .catch(error => {      if (error.name === 'AbortError') {        console.log('Fetch aborted');      } else {        console.error('Fetch error:', error);      }    });    // 요청 취소  controller.abort();  ```           오류 처리    `fetch`는 네트워크 오류가 발생했을 때만 reject됩니다. HTTP 오류 상태(예: 404, 500 등)는 reject되지 않으므로, 응답 객체의 `ok` 속성을 확인하여 오류를 처리해야 합니다.           CORS (Cross-Origin Resource Sharing)    `fetch` API를 사용할 때 <a href='https://sangseek.com/sangseeks/CORS 정책/ko'>CORS 정책</a>에 주의해야 합니다. 다른 출처의 리소스에 접근하려면 서버에서 CORS 헤더를 설정해야 합니다. 클라이언트 측에서는 특별한 설정 없이도 `fetch`를 사용할 수 있지만, 서버 측에서 적절한 CORS 정책을 설정해야 합니다.           결론    `fetch API`는 JavaScript에서 HTTP 요청을 처리하는 강력하고 유연한 도구입니다. Promise 기반으로 비동기 처리를 쉽게 할 수 있으며, 다양한 HTTP 메서드를 지원합니다. 또한, `AbortController`를 사용하여 요청을 취소할 수 있는 기능도 제공하여 더욱 유용하게 사용할 수 있습니다. 이러한 특징 덕분에 `fetch API`는 현대 웹 개발에서 널리 사용되고 있습니다.