fetch 함수

기본 형태

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

//함수 선언식 표현
fetch('api 주소')
  .then(function(res) {
	return res.json();
  })
  .then(function(res) {
  	return //data를 응답 받은 후의 로직
  });
    

위의 함수의 의미는

1. fetch 함수로 api 주소에 있는 데이터를 호출한다 (get의 경우)
2. 첫번째 .then 함수의 parameter에 api 데이터가 들어간다.
3. 첫번째 .then 함수의 return 값으로 api 데이터를 json()함수고 호출한다.
4. 그러면 그 리턴 값인 JSON데이터가 두번째 .then 함수에 parameter값으로 들어간다.
5. 그리고 두번째 .then 함수의 로직에 따라 함수가 실행된다.

여기서 위에 적어놓은 첫번째,두번째 .then 함수의 parameter 값인 res는 같은 값이 아니라는 점을 이해하면 될것같다.

method가 get인 경우와 post인 경우를 보자

method가 get인 경우

get 메소드는 default 값이기때문에 따로 적어주지 않아도 된다.

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

위와 같은 api 명세가 있을때 fetch 함수를 작성해보면

fetch('http://api.google.com/user/3')
  .then(res => res.json)
  .then(res =>
        if(res.success) {
  	    console.log(${res.user.name}님 안녕하세요!
		}
  });

method가 post인 경우

method가 post인경우에는 fetch 함수에서 정보(method,body)를 넘겨줘야한다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    {
        "success": boolean
    }

fetch('http://api.google.com/user' , {
  method: 'post',
  body: JSON.stringify({
  	name: "mingi"
  	batch: 1
  }))
  .then(res => res.json())
  .then(res => {
  	if(res.success){
    	alert("저장완료되었습니다.");
    }
  })

위와 같이 작성하면된다.
정보를 보내줄때 bodyfmf JSON형태로 보내기 위해 JSON.stringify를 해주어야한다.

Promise

자바스크립트에서는 비동기방식으로 데이터를 처리할 경우 순서와 상관없이 데이터가 실행되면서
아직 실행되지않아서 없는 데이터를 요청하는 경우가 발생할 수 있다.
이러한 경우를 위해 처리가 다 끝난 다음에 그 값을 넘겨주는 개념인 콜백 함수를 이용했었다.

근데 이러한 방법으로 여러 순차적인 과정으로 작업을 하고자 하면 코드가 지저분해지는 콜백지옥을 만나게 된다고 한다.

이러한 부분을 간단히 할수 있게 해주는 것이 Promise 의 개념이라고 한다.

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

위 코드에서 각 줄의 리턴 값이 다음 함수의 인자로 들어가고 그때 그 함수가 실행되는 방식이 Promise의 개념이다.

• 참조

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises
• https://joshua1988.github.io/web-development/javascript/promise-for-beginners/