Promise, async/await을 통한 순차실행 - 작성중

function f1() {
    setTimeout(() => {
        console.log(1);
    }, 1000);
}

function f2() {
    setTimeout(() => {
        console.log(2);
    }, 2000);
}

function f3() {
    f2();
    f1();
}

f3();
// 출력
// 1
// 2

 

시행착오1

function f1() {
    setTimeout(() => {
        console.log(1);
    }, 1000);
}

function f2(f1) {
    setTimeout(() => {
        console.log(2);
    }, 2000);
    f1();
}

f2(f1);

시행착오2

function f1() {
    setTimeout(() => {
        console.log(1);
    }, 1000);
}

function f2() {
    setTimeout(() => {
        console.log(2);
    }, 2000);
}

const f3 = new Promise((resolve, reject)=>{
    f2();
    resolve('done');
})

f3.then(()=>{
    f1();
})

 

해결

function f1(){
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1);
            resolve();    
        }, 1000);
        
    });
};

function f2(){
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(2);
            resolve();
        }, 2000);
        
    });
};

let test = async function(){
    await f2();
    await f1();
}

test();

(async () => {
    await f2();
    await f1();
})();

이렇게도 표현 가능

 

 

 

잘 설명하다 before, after를 연관도 안되게 예시 들어놓은 다른 블로그들과 달리 아래 블로그에선 

내가 궁금한걸 모두 해결해줌

https://mhui123.tistory.com/31

[Javascript] async await으로 순서 조작하기 (동시실행, 순차실행)