inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

자바스크립트 비동기 처리(2) - Promise

Call back함수와 Promise에 대한 비교

316

kwon850550

작성한 질문수 3

1

앞시간에 비동기 처리때문에 call back 함수를 띄우듯이 Promise도 똑같이 console을 띄우는 예제가 없어서 직접사용했는데 이렇게 쓰는게 맞을까 싶어서요

Promise를 새로 생성해서 했으니 call back이랑은 다른 접근이 되는게 맞나싶어서 여쭤봅니다.

아래는 순서대로 제가 작성한 call back 사용한 예제와
Promise를 사용한 예제입니다.

<body>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous"></script>
        <!-- 제이쿼리 CDN -->
    <script>
        (function fetchData(){
            var result = [];
        function getconsole(){
            console.log('데이터 호출결과 뒤에 나올 함수');
        }

        $.ajax({
            url:'https://api.hnpwa.com/v0/news/1.json',
            success(data){
                console.log('데이터 호출결과:',data);
                result = data;
                getconsole();
            }
        });
				})();
    </script>
</body>
<body>
    <script src="https://code.jquery.com/jquery-3.6.0.js" 
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <!-- 제이쿼리 CDN -->
    <script>
        function callAjax(){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url: 'https://api.hnpwa.com/v0/news/1.json',
                    success(data){ 
                        resolve(data);
                    }
                });
            });
        }
        function getconsole(){ 
            return new Promise((resolve,reject)=>{
                resolve(console.log('데이터 호출결과 뒤에 나올 함수'));   
            });
        }
        (function fetchData(){
            var result = [];
            callAjax()
                .then((data)=>{
                    console.log('데이터 호출결과:',data);
                    result = data;
                })
                .then(getconsole)
                .catch(error=>console.log);
        })();
    </script>
</body>

vuejs javascript

답변 1

1

user

안녕하세요! 지나가다 보게 되었습니다, 다른 접근이라는 것이 어떤 말씀이신지는 모르겠네요. 콜백함수는 기존의 특별한 선언이나 문법적인 특징을 가지고 있는 것이 아니라 코드 실행 시점을 구분 짓는 걸로 알고 있어요. 그래서 제게 콜백함수와 프로미스가 다른 접근이 될 수 있다는 것은 이해가 잘 안갔던 것 같습니다! 

역사적으로 콜백함수와 프로미스는 특별한 것이 아니라, 기존 콜백함수가 가지고 있었던 "절차적 사고의 위배" 또는 "코드 인덴팅" 이슈를 개선하기 위해 나온 것이라고 이해하시면 될 것 같아요!

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

50

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

145

1

깃허브 권한 요청 드립니다

0

162

1

깃허브 권한 요청 드립니다

0

168

1

깃허브 권한 요청 드립니다.

0

154

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

209

1

ide 타입추론 기능 사용할 수 없을까요??

0

207

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

229

1

Vue3로 진행중입니다

1

338

1

Vue router-link 사용시 같은 url이면

1

507

1

vue3 에러 메세지...

1

672

2

id ="app" 중복

0

271

2

use undefined 에러가 나옵니다.

1

320

2

깃허브 권한 요청드립니다.

1

359

2

권한요청드립니다.

1

300

2

Vue3에서 구글 애드센스 탑재하기

1

437

2

코드가 정상 작동 되는건지 ...

1

303

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

244

1

vuex 적용시 질문

1

288

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

385

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

455

2

권한요청 드립니다!

1

275

2