JS - 비동기적 처리 Promise와 Promise chain 그리고 async/await

자바스크립트는 한번에 하나의 작업만 수행한다. 동기적(Synchronous)인 언어임.

이를 해결하기위한 비동기(Asynchronous) 처리방법이 있지. 

1. 콜백 함수
2.Promise
3. async await 

이렇게 크게 3가지 비동기 방식이 존재한다. 

콜백함수는 화살표함수로 많이들 사용하고 계시졍? 잘못쓰면 콜백지옥에 빠진다는 그 것.

콜백함수 내에서 error나 success처리를 보다 간단하게 하기 위해 Promise가 탄생함!

 

 

Promise는 new Promise() 로 생성할 수 있고, 세가지 상태를 갖는다.

Pending(대기), Fulfilled(이행), Rejected(거부)

        var loading = new Promise(function (resolve, reject) {
            var img = document.querySelector('#test');
            img.addEventListener('load', function () {
                resolve();
            });
            img.addEventListener('error', function () {
                reject();
            });
        });

        loading.then(function () {
            console.log('로딩성공');
        }).catch(function () {
            console.log('로딩실패');
        });

resolve와 reject 2개의 인자를 받으며, 성공하면 resolve가 호출되고 실패 시 reject가 호출된다.

 

---

Promise의 특징 중 하나는 Chaining를 통해 여러개의 Promise를 이을 수 있는데, .then()이라는 핸들러를 사용한다.

그러면~ 같은 존재.

        var ajax = new Promise(function (resolve, reject) {
            $.get('https://codingapple1.github.io/hello.txt').
                done(function (result) {
                    console.log(result);
                    resolve();
                });

        })


        ajax.then(() => { console.log('get 성공') })
            .then(() => {
                $.get('https://codingapple1.github.io/hello2.txt')
                    .done((result) => { console.log(result); });
            })
            .catch(() => console.log('get실패'));

간단하게 제이쿼리로 데이터를 get해왔다.

첫번째 데이터를 받아오는데 성공하면 다음 데이터를 받아오기위해 .then() 사용.

.catch() 는 프로미스에서 reject되었을때 실행될 코드를 작성하면 됨.

어차피 제이쿼리로 ajax나 get해올때 기본으로도 .then을 제공하지만 그냥 이해하기쉽게 ㅎㅅㅎ

---

async 키워드는 함수 선언부에 붙여주면 된다.

그럼 비동기 함수가 되며 프로미스를 반환한다. 그리고 항상 success함.

        async function 더하기(){
            return 1+1;
            //return Promise.reject('실패임')  <<script 강제로 실패발생
        }

        더하기().then(function(result){
            console.log(result + ' 더하기 성공');
        })

따로 new Promise()를 하지않아도 .then() 핸들러를 사용할 수 있다.

 

 

물론 async 내에서도 Promise 생성 가능.

        async function 버튼누름() {

            var 프로미스 = new Promise(function (성공, 실패) {
                var button2 = document.querySelector('#버튼2');
                button2.addEventListener('click', function () {
                    성공('버튼누름');
                });
            });
            try {
                var 결과 = await 프로미스;
                console.log(결과);
            } catch {
                console.log('안댐');
            }
        }


        버튼누름();

중간에 await키워드는 말 그대로 promise 될때까지 기다려주는 애임.

async 함수 내에서만 사용가능하다. .then()과 유사함.

그리고 성공/실패 처리는 함수 내에서 try { } 와 catch { }로 구현할 수 있다.