fetch함수 목데이터 과제를 하게 되면서 fetch함수에 대해 알게 되었다.
프론트가 구현한 로그인 페이지, 회원가입 페이지를 가지고 많은 고객들이 이용하면서 입력한 내용을 서버를 보내게 된다 (request)
만약 기존 고객이라면 데이터를 확인 후 토큰을 얻어야 하며
아이디가 틀렸을 경우 alert 처리 혹은 다른 처리를 회원가입을 할경우
기존에 있던 아이디와 겹칠경우 등 다양한 상황에 백엔드에게 데이터 요청을 하여 비교 확인을 하고 사후 처리를 할수 있게 된다. (response)
결국 요청(request) 을 보내면 응답(response)을 해줄수 있게 되는 것
Fetch함수
fetch함수의 생김새
fetch(“api주소”,{
method: “POST”,
body: JSON.stringify({
email:this.state.id ,
password:this.state.pw,
}),
})
.then ((response) => response.json())
.then ((result) => console.log(“결과” , result));
이런 형식으로 fetch함수를 작성하게 된다
fetch함수에 들어갈 내용
fetch함수는 2가지 인자를 받는데 api주소와 (method,body)등의 객체형식을 인자로 받는다.
api주소란 백엔드가 미리 데이터를 구축해둔 ip주소 ? end 포인트 값이다.
백엔드에게 요청하여 얻을수 있다.
method- get,post를 사용하여 요청을 보낼때 어떤 메소드를 사용할 것인지 정하게 된다.
body - id,passward 등 백엔드에게 보낼 정보들을 객체형식으로 보낸다.
단 키는 백엔드와 상의하여 합의된 키를 사용하여 키오류가 나지 않게 해야 한다.
then메소드를 사용하는 이유
fetch함수는 비동기 함수 이다. fetch함수와 같이 통신용으로 사용되는 함수 대부분은 비동기이다.
동기,비동기
동기: 순서대로 처리가 된다.
비동기 : 결과값을 기다리지 않는다. 기다리지 않고 다음줄을 실행한다.
유저가 기다리는 시간이 발생하기 때문에 통신은 대부분 비동기로 사용된다.
.then은 요청을 받고 그다음에 ~~을 처리해라 라는 뜻으로
비동기를 동기형식으로 진행시킬수 있다.
예시로 메시지를 pass로 받으면 메인으로 이동하게 한다.
오류 메시지가 발생하면 경고를 등장시켜라 등등으로 조건문인 if를 사용하여
다양한 사후 처리를 가능하게 한다.
