TIL.fetch 함수

fetch함수

• javascript에서 Http요청을 보낼때는 fetch함수를 사용한다.
• fetch함수는 첫번째 인자로 http 요청을 보낼 API주소, 두번째 인자로 요청을 보내때의 옵션들을 객체형태로 받는다.
• 백엔드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받는다. 이 때 자바스크립트 Web fetch() 함수를 쓰거나 axios라이브러리를 사용할 수 있다. -참고로 Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수라고 생각하면 된다.

fetch()함수 기본

fetch('api주소')
	.then(res => res.json())
    .then(res => {
    // data를 응답 받은 후의 로직
    });

화살표 함수로 몸통을 확 줄인 위킈 코드도 ES5의 함수 선언식으로 바꿨을 때 어떤 모양인지 아셔야 더 복잡한 fetch를 구현할 수 있다.

화살표 함수 => ES5의 함수 선언식으로 바꿔보자

fetch('api주소')
	.then(function(res) {
    return res.json();
    })
    .then(function(res) {
    // data를 응답 받은 후의 로직
    });

fetch()함수- method가 get인 경우

fetch() 함수에서 Default method는 get이다. 그래서 위의 코드는 get으로 호출한것이다.

api 명세를 보고 어떻게 Fetch()를 사용하면 되는지 보자

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
	{
    	"success":boolean,
        "user": {
        	"name": string,
            "batch": number
            }
     }

호출하려면 아래와 같이하면 된다.

fetch('https://api.google.com/user/3')
	.then(res => res,json())
    .then(rea => {
    if(res.success) {
    	console.log(`${res.user.name}` 님 환영합니다);
    }
  });