자바스크립트 프로미스 체이닝과 셋타임아웃에 관하여

Question

아래 스크립트를 보시면 프로미스 체이닝을 사용했는데 .catch를 통해 reject되면 &#34;오류&#34;라는 로그가 뜨도록 명령했습니다. 물론 catch(console.log)이라고 입력하면 reject값인 &#34;2번 주문 실패&#34;라는 로그가 뜹니만실험 삼아 catch 안에 reject 값을 따로 부르지 않고 콘솔 로그로 직접 입력해봤습니다.그런데 문제는 catch(console.log)로 reject 값을 띄우면 순서대로&#34;1번 주문 완료&#34; &#34;2번 주문 실패&#34; &#34;주문 끝&#34; 위와 같이순서대로 콘솔에 출력되는데 catch(console.log(&#34;주문 오류&#34;)와 같이 console.log에 문자열을 직접 입력하면 &#34;주문 오류&#34;&#34;1번 주문 완료&#34;&#34;주문 끝&#34;위와 같이 catch 명령이 먼저 실행됩니다.catch 명령이 실행되려면 f2()가 실행이 되어서 reject()를 읽어야 하는 것 아닌가요?어떻게 f2()가 실행되기도 전에, 즉 f2()의 console.log(message)가 실행되기도 전에catch 명령인 console.log(&#34;주문 오류&#34;)가 먼저 뜨는걸까요? f1()의 setTimeout 가 스크립트를 다 읽은 후에 스케줄링하기 때문에 그런가 싶어서f1()의 setTimeout 없이 실행도 해봤는데 로그 결과는 변함 없이 &#34;오류&#34;가 제일 먼저 뜹니다.이 말인즉, res 를 1초 후에 넘기라는 스케줄링 때문이 아니라는건데 ...왜 그런지 아시는 분 있습니까? 유튜버 코딩앙마님의 강의 영상을 보다가 궁금증이 생겼네요.https://www.youtube.com/watch?v&#61;3Ao3OroqQLQ ----------------------------------------------------------const f1 &#61; () &#61;> { return new Promise((res, rej) &#61;> { setTimeout(() &#61;>{ res(&#34;1번 주문 완료&#34;); }, 1000); });}; /*아래와 같이 setTimeout 없이 해도 로그 순서는 그대로 &#34;오류&#34; 먼저 ㅠ const f1 &#61; () &#61;> { return new Promise((res,rej) &#61;> { res(&#34;1번 주문 완료&#34;); };};*/ const f2 &#61; (message) &#61;> { console.log(message); return new Promise((res, rej) &#61;> { setTimeout(() &#61;> { rej(&#34;2번 주문 실패&#34;); }, 3000); });}; const f3 &#61; (message) &#61;> { console.log(message); return new Promise((res, rej) &#61;> { setTimeout(() &#61;> { res(&#34;3번 주문 완료&#34;); }, 2000); });}; f1() .then((res) &#61;> f2(res)) .then((res) &#61;> f3(res)) .then((res) &#61;> console.log(res)) .catch(console.log(&#34;오류&#34;)) // .catch(console.log) 와 비교했을 때 로그의 순서가 바뀝니다. .finally(()&#61;> { console.log(&#34;주문 끝&#34;) });----------------------------------------------------------

토끼왕 · Accepted Answer

이런식으로 한번 해보세요.// 비동기함수 선언 async function myAsyncFunction() { try { // Promise 객체를 반환하는 함수 실행, 성공하면 resolve된 값을 반환한다 const resolvedValueA &#61; await myPromiseFunctionA(); const resolvedValueB &#61; await myPromiseFunctionB(); const resolvedValueC &#61; await myPromiseFunctionC(); return 'final'; // 비동기함수의 반환값은 자동으로 Promise.resolve() 함수의 인자로 넘어가 반환된다 } catch (error) { // try 블럭 안에서 reject 혹은 throw 가 발생했을 때 catch 블럭이 실행된다 console.log(error); } } // 비동기함수 실행 myAsyncFunction();

캐티 · Answer

catch 인자에는 콜백 함수가 들어가야하빈다. catch( console.log(&#34;오류&#34;) ) 라고 하면 console.log 의 실행 결과가 catch 에 들어가서 프로그램이 망가지빈다.

육군사이버용사 · Answer

&#64;scala 님 답변 감사합니다. 제가 아직 비동기 함수에 대해 배우지 않아서 진도가 나가는대로 꼭 살펴보겠습니다! &#64;캐티 님 답변 감사합니다. catch에 콜백 함수가 들어가야 하는데 콘솔로그 명령을 그냥 집어넣어서 그런거군요.빠른 답변 감사합니다!

자바스크립트 프로미스 체이닝과 셋타임아웃에 관하여

3개의 답변

Q&A 목록