Error Handling: 비동기 처리

return 값으로 Promise pending

해결해보기

1. 자바스크립트 엔진은 Single Thread다.

따라서 동시에 두 가지 일을 처리할 수 없고, 한 번에 하나의 작업만이 가능하다. 그래서 동기적 방식이 아닌 비동기(asynchronous)로 작업을 처리한다. setTimeout함수 예가 대표적이다.

console.log('a')

function x() {
  console.log('x')
}

setTimeout(x, 3000)

console.log('b')

// 결과
// a
// b
// x

2. 코드 실행순서

• ‘a’가 콘솔에 log한다.
• 3초 뒤 콘솔에 log하는 함수를 실행하기로 약속
• 약속한 함수는 web api가 기억
• ‘b’를 콘솔에 log
• 3초 뒤 web api는 큐(queue)에 ‘x’를 log하는 함수를 보낸다.
• 이벤트루프는 큐(FIFO)에 들어오는 순서대로 스택(LIFO)으로 보내 실행되도록 한다.

3. Promise

• Promise는 ES6에서 비동기 처리를 다루기 위한 객체다. 서버와 통신을 하는 함수들은 기본적으로 비동기적으로 실행된다고 봐야 한다.

콘솔에서 'pending'을 보지 않기 위해?

1. 함수에 async, await 사용

	async getUser() {
    const result = await Axios.get("/users/auth").then((res) => {
      console.log("[Auth]get userData:", res.data);
      if (res.data) {
        return res.data;
      } else {
        alert("fail to get userData");
      }
    });
    return result;
  };

2. Callback함수 이용

// react는 useCallback이용
	function getUserData(callback) {
	  let user;
	
	  setTimeout(function () {
	    user = "angela";
	    callback(user);
	  }, 2000);
	}
	
	getUserData(function (user) {
	  console.log(user);
	});

3. queueMicrotask 이용

useEffect 내부에서는 async, await가 적용이 안되므로 queueMicrotask를 이용한다.

	useEffect(() => {
	    queueMicrotask(async () => {
	      let userdata = await user.getUser();
	      setUserData(userdata);
	    });
	  }, [setUserData]);