[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise

서버와의 비동기 요청방식 fetch라는 것이 있다. 오잉? 비동기 요청방식은 Ajax 아니야?

맞다. fetch는 Ajax의 방식 중 하나이다. 그것도 최신 방식!

나는 지금까지 Ajax라는 것이 있는 건 줄 알았고, 그냥 써보기만 했다. 근데 사실 비동기 방식의 유래도 있었다.

 

# 비동기 서버 요청의 초기 방식 XML Http Request

왠지 자바에서 서버 통신할 때 많이 본 듯한... 초기에 비동기 요청방식을 사용하려면 저렇게 많은 코드의 틀이 필요로 했다. 그러나 그 코드를 줄이고 간편하게 사용하고자 해서 이후에 나온 것이 Ajax이다. 

 

# 비동기 방식 Ajax란?

 

그리고 Ajax 방식 중 최신기술인 fetch API

이 틀에서 바로 사용 가능! 참고로 fetch API는 promise 방식의 기반이라고 함.

 

# Promise 방식

then 키워드 이것은 앞은 함수 실행이 끝나면 그 다음으로 할 일을 정해주는 것.

'fetch('서버주소')' 는 웹 브라우저에게 '이 서버주소로 요청해줘' 라는 의미이고, 뒤에 .then이 붙으면 '요청 끝나고나서 이 할일을 해줘!' 라는 것.

그런데 중요한 것은 여기에 있다...!

fetch는 서버와의 통신에서 사용되는 것. 그럼 서버쪽은 요청을 어떻게 받아내고 응답을 할 때의 소스코드가 어떻게 될까?

function runPromise(resolve, reject){
  resolve('전달해줄 데이터');
}
const fetch = ('응답받은 서버주소') =>{
  return new Promise(runPromise);
}

fetch는 위에도 썼듯이 promise 기반이다. 그래서 Promise라는 클래스를 사용한다. 그래서 사실 서버에서는 Promise의 인스턴스를 반환해준다. 위 코드를 보면 runPromise라는 함수를 전달한다. (그리고 사실 위 코드처럼 저렇게 runPromise로 함수를 빼기보단 new Promise() 괄호 안에 익명함수로 쓰는게 맞다.)

runPromise는 첫번째 인자 resolve, 두번째 인자 reject를 가진다. resolve는 정상적으로 실행이 되었을 시 클라이언트에게 전달해줄 값을 인자로 넣어준다. reject는 클라이언트의 요청에 문제가 있을 시, catch로 반환할 값을 전달해준다.

fetch().then((response)=>{
  console.log(response);
});

 

그러면 fetch()에서 반환받은 Promise 인스턴스 안의 then이라는 함수에다가, 우리가 요청 뒤에 처리해줄 함수를 인자로 전달해주면 된다. 위 코드의, 전달해줄 함수의 매개변수 response가 API에서 요청으로 전달받은 값으로 들어온다.

 

그러면 Promise라는 녀석은 구조가 어떻게 되어 있길래 클라이언트에서 저렇게 사용할 수 있을까?
그래서 직접 Promise 구조를 만들어 봤다.

 

# 직접 만들어본 Promise 구조

class Mypromise{
  constructor(runPromise){
	this.runPromise = runPromise;
	this.myResponse = null;
    this.myReject = null;
  }
  then(func){
    this.runPromise(
	  (resolveValue) => {
        this.myResponse = resolveValue;
      },
       (rejectValue) => {
         this.Myreject = rejectValue
       });
	func(this.myResponse);
  }
}

 

저렇게 해서 사용해보니, 기존 Promise와 똑같이 사용된다.ㅎㅎㅎㅎ

이 구조를 파악하고 짜느라 시간이 좀 걸렸다... 그래도 이번 기회에 프로미스와 fetch API 구조를 완전히 이해하게 되었다.