정의
- 클라이언트가 서버에 HTTP 통신으로 요청(request)을 보내고, 정보를 응답(response) 받을 때 사용되는 메서드
- 클라이언트는 fetch 메서드를 이용해 서버로 데이터를 요청해서 받고(read), 데이터를 생성(create), 수정(update), 삭제(delete) 할 수 있다.
fetch 요청 (request)
- 사용예시
fetch('api주소', {
method: '...',
headers: { 'key': 'value' },
body: JSON.stringify({ 'key': 'value' }),
}) //요청
.then((response) => response.json())
.then((data) => console.log(data));
//응답fetch의
- 첫번째 인자: 데이터를 요청할 서버(백엔드) API 주소
http:// or https:// , IP 주소(with 포트 번호) or 도메인 주소, 엔드 포인트로 구성 - 두번째 인자: client -> server 요청의 옵션 값들 (객체 형태)
method, headers, body, mode, credentials, omit, same-origin, include, cache, redirect, referrer, referrerPolicy, integrity, keepalive, signal 등의 key와 각각 해당하는 value
- method: 어떤 method로 요청할지 (GET, POST, PUT, PATCH, DELETE 등)
- headers: 서버에 요청할 때 보낼 부가적인 정보 (Host, user-Agent, Authorization, Content-Type 등)
headers: {
'Content-Type': 'application/json;charset=utf-8',
Authorization: localStorage.getItem('accessToken'),
},- body: 서버에 요청할 때 보낼 실질적인 정보 (생략 가능)
body: JSON.stringify({
title: 'update title',
content: '서버에 요청할때 담아서 보내는 정보',
})JSON.stringify:
body에 담긴 정보를 서버로 보낼 때 데이터 형태를 JSON 형태로 보내고 받아야 하는데, JSON으로 형 변환을 해주는 메서드
why JSON?:
통신 간, 서버와 클라이언트는 같은 언어일 때 주고 받을 수 있다. JSON 형태는 어떤 언어에서든 원하는 데이터를 주고받을 수 있다. JSON의 형태는 자바스크립트의 객체와 유사하지만, javascript가 아니더라도 JSON을 읽고 쓸 수 있는 기능은 대부분 언어에서 제공된다. javascript와 python이 데이터를 주고받을 때도 JSON 형태 라면 주고받을 수 있다.
// JSON.stringify 메서드 인자에 data 담기
JSON.stringify({
title: 'update title',
content: '서버에 요청할때 담아서 보내는 정보',
});
// JSON 문자열
{ "title": "update title", "content": "서버에 요청할때 담아서 보내는 정보" }비동기(asynchronous)
- 동기적 처리: 한 줄 한 줄 순서대로 처리, 이전의 작업이 끝나야 다음 작업으로 이어지는 처리 방식
단점: 이전 처리가 끝날 때까지 기다려야 함, 오래 걸림 - 비동기적 처리: 이전 작업의 종료 여부와 상관없이 기다리지 않고 다른 작업을 처리 할 수 있음
단점: 동기적인 방식보다 복잡함
=> 통신과정은 동기적인 처리 순서에 영향을 주지 않도록 비동기로 처리해야 하고, 그래서 fetch 함수는 비동기로 동작함
fetch 응답 (response)
- .then() 메서드: Promise를 처리할 수 있는 메서드
.then()은 두 개의 콜백 함수를 인자로 받는다. 각각 Promise가 이행됐을 때, 거부했을 때를 위한 콜백 함수이다.
.then() 메서드는 Promise를 return 하기 때문에 첫 번째. then()에서 반환된 값을 두 번째. then()에 이어서 처리할 수 있는 메서드 체이닝(chaning)이 가능하다.
// .then() 메서드 문법
.then(function onFullfilled, [function onRejected])
//응답
.then((response) => response.json())
.then((data) => console.log(data)); status code에 따른 첫번째 분기 처리
- 첫번째 then
응답받은 response 객체에 여러 가지 key가 반환되는데
그 중 status key는 통신의 실패, 성공 여부를 판단한다. status는 statuscode를 의미한다.
통신 성공: {status: 200~299, ok: true}
통신 실패: {status: 400~499(client error) or 500~599(server error), ok: false}
*첫번째 then 예시
.then((response) => {
if (response.ok === true) {
return response.json(); //response의 body(JSON 형태)를 자바스크립트 객체로 변환해 주는 메서드
}
throw new Error('에러 발생!'); //통신에 실패할 경우 error를 throw
})
.catch((error) => console.log(error)); //throw된 error를 받아서 console에 출력-> response로 응답받은 status 코드에 따라 처리 방법을 나눌 수 있음
첫번째 응답에서 반환된 객체로 두번째 응답에서 분기 처리
통신에 성공해서 JSON을 객체로 변환했다면, 변환된 객체를 활용해서 분기 처리할 수 있다.
*두번째 then 예시
.then((data) => {
if (data.message === 'login success') {
localStorage.setItem('TOKEN', data.token);
alert('로그인 성공');
} else {
alert('로그인 실패');
}
});
냐하