JavaScript Fetch API 구성 요소 설명 | ChatGPT

 

ChatGPT 생성 이미지

fetch(url, {...})

• fetch 함수는 네트워크 요청을 보내기 위해 사용됩니다.
• 첫 번째 인자로 URL을 받고 두 번째 인자로 요청의 옵션을 설정합니다.

옵션 객체

• method
  • HTTP 요청의 메서드를 지정합니다.
• mode
  • 'cors' 옵션: CORS(Cross-Origin Resource Sharing) 모드는 다른 출처의 리소스에 접근할 수 있게 해줍니다.
• credentials
  • 이 옵션은 요청에 자격 증명(쿠키, 인증 헤더 등)을 포함할지 여부를 결정합니다.
  • 'include' 옵션: 'include'는 자격 증명을 포함하도록 설정합니다.

headers: {...}

• "Content-Type"
  • "application/x-www-form-urlencoded; charset=UTF-8": 요청의 본문이 application/x-www-form-urlencoded 형식임을 명시합니다. 일반적으로 HTML form 데이터 전송에 사용되는 MIME 타입입니다.

body

• body는 요청의 본문에 포함될 데이터를 설정합니다.
• new URLSearchParams(formData)
  • formData 객체를 URLSearchParams로 변환하여 URL 인코딩된 문자열로 만듭니다.
  • 이 형식은 키-값 쌍을 쿼리 스트링 형태로 변환하며, application/x-www-form-urlencoded 타입에 맞게 데이터를 구성합니다.

응답 처리

• .then(function (response) { return response.json(); }):
  • 서버로부터 응답이 성공적으로 수신되면, 응답을 JSON 형식으로 변환합니다.
• .then(function (data) { })
  • JSON으로 변환된 데이터를 처리하는 부분입니다.
• .catch(function (error) { })
  • 요청 과정에서 오류가 발생했을 때 호출되는 부분입니다.

출처 | ChatGPT