그래도 fetch 알아는 둬야지!

아무리 axios 를 많이 쓴다 해도 fetch도 배워야 한다고 하신듯 하다.

전 글에서 썼듯
fetch는 XMLHttpRequest 객체를 만들어서 쓰는 방법이다.

형식

function rsLogin() {
	let url = "/here";
    fetch(url, {...
    
    }).then(function(){...
    
    }).then(function(){...
    
    }).catch(function(){...
    
    });

• url : 액세스할 URL
• options : 선택적 매개변수 : 메서드, 헤더 등

Request[options] : 선택적 매개변수

• method : 'Post'
• headers : {필요시 사용},
• body : {id: 'banana', password:'1234'...}
  이 외에도 url, mode, cache, credential 등 다양한 설정이 가능.

fetch
=> then
-- response 속성값
-- response.status : HTTP 상태 코드
-- response.ok : Boolean, HTTP 상태 코드가 200-299 사이이면 True
-- response.headers : HTTP 헤더를 담고있는 맵과 유사한 객체
-- Body-reading 메서드
-- response.text() : 응답을 읽고 텍스트로 반환
-- response.json() : 응답을 JSON으로 구문 분석
-- response.formData() : 응답을 FormData 객체로 반환
-- response.blob() : 응답을 유형이 있는 이진 데이터로 반환
-- response.arrayBuffer() : 응답을 바이너리 데이터의 저수준 표현 으로 반환
-- response.body : ReadableStream 객체이므로 본문을 청크별로 읽을 수 있다.

=> catch : then 에서 발생시킨 Error 의 매개변수 값을 인자의 message 속성으로 전달받아서 처리한다.

📢 실습시 login 함수에 fetch를 적용한 예시이다.