All Articles

Promise 활용

javascript logo

Promise 를 이용해서 API 받아오기

API 를 받아오는 Request 라는 함수를 생성했다. 아래 script 는 함수 전체 모습이다.

// ApiUtil.js 파일
const Request = (method, url, data) => {
  let body = {
    method: method,
    headers: {
      "Content-Type": "application/json"
    }
  };
  if (data) {
    body.body = JSON.stringify(data);
  }
  return fetch(url, body)
    .then(res => res.json())
    .then(res => {
      if (res.status === 200) {
        const result = res;
        return Promise.resolve(result);
      } else {
        return Promise.reject(res.message);
      }
    });
};

export default Request;
}

fetch함수 자체를 return 해줘야 Request함수를 사용할 때, Promise 를 받을 수 있다.

이 함수가 사용될때는 아래와 같이 사용된다.

_first = () => {
  const innerFunc = async () => {
    let a = await this._second();
    return a;
  };
  innerFunc()
    .then((res) => {
      // console.log("then", res);
      let memberInfo = res.data.content;
      this.setState({ memberInfo: memberInfo });
    })
    .catch((res) => {
      console.log('catch', res);
    });
};

_second = () => {
  return new Promise((resolve, reject) => {
    this._loginInfo()
      .then((res) => {
        // console.log(res);
        resolve(res);
      })
      .catch((res) => alert(res));
  });
};

_loginInfo = async () => {
  let data = {
    memberId: this.state.memberId,
    memberPw: this.state.memberPw,
    registerTypeCd: 'email',
  };

  let result = await Request('post', url, data);
  return Promise.resolve(result);
};

설명

  1. 로그인 버튼을 클릭하게 되면 _first 함수가 실행된다.
  2. _first 함수 내부에는 innerFunc가 선언되어 있고, innerFunc가 실행된다.
  3. innerFunc 는 async 함수이므로 _second 함수를 기다린다.
  4. 이제 _second 함수가 실행된다.
  5. _second 함수는 _loginInfo 함수를 실행한다.
  6. _loginInfo 함수는 Request 함수가 실행되기를 기다린다. 이제 Request 함수가 실행된다.
  7. 드디어 Request 함수가 실행하는데, fetch 함수를 사용했으므로, JSON.stringify가 필요함.
  8. API 결과를 확인해서 Promise.resolve(result)를 선언하여 resolve 시킨다.
  9. 이제 resolve 가 떨어졌으니 앞선 함수 선언들이 모두 resolve 상태로 쭉 이어나갈 것이다.

Promise 와 async/await 을 같이 공부하면서 테스트 해서 쓸데없는 선언이 많아졌다.

앞으로 API를 이용하면서 사용할 수 있는 예제가 될것 같다.

오랜만의 블로그 정리 끝.