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]);
Author And Source
이 문제에 관하여(Error Handling: 비동기 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyejeong/Error-Handling-비동기-처리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)