상추의 IT저장소

JS) Fetch API 본문

Javascript

JS) Fetch API

구너상추 2023. 12. 9. 00:24

fetch API

- HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다.

- fetch 함수는 HTTP 요청 전송 기능을 제공하는 Web API다.

- fetch 함수는 HTTP response 객체를 래핑한 Promise 객체를 반환한다. 따라서 프로미스의 후속 처리 메서드인 then을 사용하여 resolve한 객체를 전달받을 수 있다.

 

 

fetch 함수로 HTTP 요청하기

- fetch 함수에는 HTTP 요청을 전송할 URL, HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.

 

1. GET :  서버로 부터 데이터를 취득  

GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용되는 메소드이다. 만약에 GET요청이 성공적으로 이루어진다면 XML이나 JSON과 함께 200 (Ok) HTTP 응답 코드를 리턴한다. 에러가 발생하면 주로 404 (Not found) 에러나 400 (Bad request) 에러가 발생한다.

 

2. POST : 서버에 데이터를 추가, 작성 등

POST 메소드는 주로 새로운 리소스를 생성(create)할 때 사용된다. 조금 더 구체적으로 POST는 하위 리소스(부모 리소스의 하위 리소스)들을 생성하는데 사용된다. 성공적으로 creation을 완료하면 201 (Created) HTTP 응답을 반환한다

 

3. PUT : 서버의 데이터를 갱신, 작성 등

 

4. DELETE : 서버의 데이터를 삭제

 

 

 

참조 :

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

 

https://velog.io/@eunjin/JavaScript-fetch-%ED%95%A8%EC%88%98-%EC%93%B0%EB%8A%94-%EB%B2%95-fetch-%ED%95%A8%EC%88%98%EB%A1%9C-HTTP-%EC%9A%94%EC%B2%AD%ED%95%98%EB%8A%94-%EB%B2%95

'Javascript' 카테고리의 다른 글

JS)next.js- Server/Client Component  (0) 2024.08.13
JS)pnpm  (0) 2024.07.30
JS) instance of 연산자  (0) 2023.01.27
JS) npm 검색&업데이트&삭제  (0) 2023.01.20
JS)slice(), splice()  (0) 2022.12.28