비동기, Promise

요즘 작업을 하다보면 피할 수 없는 단어가 바로 비동기, Promise 같은 그런 단어이다. 브라우저에 내장된 fetch API도 그렇고 대중적으로 많이 쓰는 axios 의 경우도 Promise 객체를 반환한다. 오늘 작업 중에 다음과 같은 문제에 봉착했다.

const checkUserInfo = token => {
	axios({
		method: 'get',
        url: `${config.apiUrl}/users/current`,
        headers: {
          content: 'application/json',
          Authorization: `Bearer ${token}`,
        },
      }).then(res => {
        localStorage.setItem('userEmail', res.email);
      });
};

const setUserInfo = result => {
	localStorage.setItem('loginToken', result.token);
	localStorage.setItem('refreshToken', result.refreshToken);
	doLogin(result.token);
	return result;
};

// 중략

axios
	.post(`${config.apiUrl}/users/authenticate`, loginData)
    // .then(res => {
    //   setUserInfo(res.data);
    //   return res;
    // })
    .then(res => {
      return new Promise(resolve => {
        resolve(setUserInfo(res.data));
      });
    })
    .then(result => {
      checkUserInfo(result.token);
    })
    .catch(err => {
      console.log(err);
      alert(`로그인 실패`);
    });

로그인을 시도한 후 성공하면 AccessToken 을 가지고 유저정보를 좀 더 캐내는.. 그런 작업을 순차적으로 하고 있다. 사실 간단하게 가려면 AccessToken 만 있으면 되므로 주석처리 된 부분에서 res를 return 해서 넘기면 되는데 가끔 그렇지 않고 다른 종류의 작업에서 최초의 비동기통신이 아닌 성공 후 첫번 째 then을 타고 실행되는 비동기 통신에서 뭔가를 또 받아서 넘겨야 한다면 주석처리가 해제된 코드로 넘기면 되는 거 같다.

어렵다 어려워