VUE async

2022-01-24

비동기 식(함수) - asynchhrone : 함수 호출에 의해서 후속 실행문을 가져와서 사용한다.

ES5 콜백함수

var hero = {
    name : "골리앗",
    action : function(who) {
        console.log(this.name + "을(를) " + who + "이(가) 공격한다.");
    } 
}
hero.action("다윗"); // #1

function work1(onDone) {
    setTimeout(function(){
        onDone("작업 1번 완료"); // 호출문/("데이터") ==> 내부에 전달된 함수문을 실행하는 역할을 갖고 있음
    }, 1000);
}
function work2(onDone) {
    setTimeout(function(){
        onDone("작업 2번 완료");
    }, 2000);
}
function work3(onDone) {
    setTimeout(function(){
        onDone("작업 3번 완료");
    }, 3000);
}

work1(function(msg1)) {
    console.log("최초 실행으로부터 1초 후 : " + msg1);

    work2(function(msg2)) {
        console.log("최초 실행으로부터 3초 후 : " + msg2);

        work3(function(msg3)) {
            console.log("최초 실행으로부터 6초 후 : " + msg3);
        }
    }
}

ES6 PROMISE

콜백지옥을 해결하고자 promise() 클래스 함수
promise() 자바스크립트에서 비동기 방식으로 처리되는 함수를 지칭
promise() 함수는 실행되는 시점에서 미래에 대한 값 또는 시점은 당장 알 수 없으나 미래 시점에서 성공 또는 실패라는 관점에서 결과값을 도출하는 것이 가능

const promise1 = new Promise ((resolve, reject) => {
    resolve("성공");
});
// 현재 위치까지는 결과값을 알 수 없음
promise1.then((value) => {
    console.log(value);
})
// then이라는 메서드가 작동됨으로써 해당하는 결과값을 가져올 수 있음

// 성공과 실패 여부를 확인
const promise_equal = function(a){
    return new Promise((resolve1, reject1) => {
        if(a) {
            resolve1("성공");
        } else {
            reject1("실패");
        }
    })
}

const bool_1 = 10 == "10";
console.log(bool_1);

promise_equal (bool_1).then((val) => { // promise_equal(bool_1) 호출 -> then() 메서드 함수를 진행
    console.log(val); // 성공
    // 성공 여부를 판단하는 곳 (Promise 함수에서 제공된 결과값 : resolve1)
}, (error) => {
    console.log(error); // 실패
    // 실패 여부를 판단하는 곳 (Promise 함수에서 제공된 결과값 : reject1)
});

작업 순서 Promise ~ then 을 적용

const work1 = () =>
    new Promise(resolve => {
        setTimeout(() => resolve("작업 1번 완료"), 1000);
    });
const work2 = () =>
    new Promise(resolve => {
        setTimeout(() => resolve("작업 2번 완료"), 2000);
    });
const work3 = () =>
    new Promise(resolve => {
        setTimeout(() => resolve("작업 3번 완료"), 3000);
    });

work1()
.then(msg1 => {
    console.log("최초 실행으로부터 1초후 " + msg1);
    return work2();
})
.then(msg2 => {
    console.log("최초 실행으로부터 3초후 " + msg2);
    return work3();
})
.then(msg3 => {
    console.log("최초 실행으로부터 6초후 " + msg3);
})

Promise의 역할은 항상 대기시킨다.
then의 역할은 대기된 인스턴스 메모리를 호출하면서 순서대로 접근하여 활용하겠다는 것을 의미.(체이닝 기법 적용)

async / await

async/ await 패턴은 Promise 함수로도 구조화가 어렵기 때문에 ES8에서 해결하고자 도입된 부분.
promise 함수가 인지가 안될 경우, 실행문 작성법 어려운 편

async 라는 함수를 붙이면 비동기 함수로 지정

1	<script src="구글맵으로 연동된 데이터 주소" async></script>

await는 독립적으로 사용할 수 없음.
await 뒤에는 반드시 promise라는 클래스 함수가 작성되어야 함.
await는 Promise에 의한 비동기 작업이 종료될 때까지 멈추고 그 결과값을 리턴으로 돌려받는다.
resolve에 대한 결과값을 받고자 한다면 then() 메서드를 통해서 받을 수 있음.

async function printOut(){
    const data1 = await new Promise(resolve => {
        setTimeout(() => {
            resolve("1번 작업 완료");
        }, 1000);
    })
    console.log(data1);

    const data2 = await new Promise(resolve => {
        setTimeout(() => {
            resolve("2번 작업 완료");
        }, 2000);
    })
    console.log(data2);

    const data3 = await new Promise(resolve => {
        setTimeout(() => {
            resolve("3번 작업 완료");
        }, 3000);
    })
    console.log(data3);
}
printOut();

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미