본문 바로가기
Javascript

JAVASCRIPT Fetch()

by titlejjk 2023. 5. 30.

fetch 함수는 주로 웹 개발에서 사용되는 함수로, 네트워크를 통해 데이터를 가져오는 역할을 한다. 주로 HTTP 요청을 보내고 응답을 받아오는 데 사용된다. fetch함수는 브라우저의 내장 API로 제공되는데, 이 API를 사용하여 비동기적으로 데이터를 가져올 수 있다.

fetch함수는 기본적으로 Promise를 반환한다. Promise는 비동기 작업이 완료되었을 때 결과를 처리학 위해서 사용되는 객체이다.

fetch함수가 Promise를 반환하므로 우리는 then()메소드를 사용하여 데이터를 처리하거나, async/await 구문과 함게 사용할 수 있다.

 

간단한 예로 fetch 함수를 사용하자면 JSON데이터를 가져오는 기본적인 fetch요청인데

fetch("https://api.example.com/data")
	.then(response => response.json())
   	.then(data => {
    	//데이터를 처리하는 로직
    	console.log(data);
    })
    .catch(error => {
    	//에러 처리로직
    	console.log(error);
    });

위 예제 처럼

fetch("https://api.example.com/data")

은 지정된 URL로 GET요청을 보낸다. 서버는 요청을 처리하고 응답을 반환한다. 그리고 첫 번째 then()메소드에서 응답(response)객체를 JSON형식으로 변환한다.

.then(response => response.json())

두 번째 then()메소드에서는 변환된 데이터를 처리한다. 만약 에러가 발생하면 catch()메소드에서 에러를 처리할 수 있다.

 

fetch함수를 사용하여 다양한 HTTP 요청을 보낼 수 있으며, 요청 헤더를 설정하거나 POST요청을 보낼 때 데이터를 전송하는 등의 작업을 할 수 있다. 또한 fetch함수는 선택적으로 Request 객체를 인자로 받을 수 있어 더 세밀한 요청설정이 가능하다.

'Javascript' 카테고리의 다른 글

JAVASCRIPT Promise  (0) 2023.05.31
JAVASCRIPT PreventDefault()  (0) 2023.05.30
JAVASCRIPT Callback() 함수  (0) 2023.05.26
JAVASCRIPT Canvas  (0) 2023.05.03
JAVASCRIPT 대입연산자  (0) 2023.04.24

댓글