포시코딩

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

JavaScript

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

포시 2022. 12. 3. 23:40
728x90
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으로 순서 조작하기 (동시실행, 순차실행)

Promise를 반환하는 function을 선언하고 .then() 을 통해서 순서를 조작할 수 있기는 하지만, 실제 사용에 있어 코드가 길어지고 읽기 난해해지는 부분이 있는데 이때 javascript에서 제공하는 function의 a

mhui123.tistory.com

728x90
저작자표시

'JavaScript' 카테고리의 다른 글

JavaScript 학습목표  (0) 2022.12.12
for of 문, for in 문 (Array, Object)  (1) 2022.12.11
클립보드에 복사  (0) 2022.11.09
script 파일 불러올 때 쓰는 defer가 뭘까? (async, defer)  (0) 2022.10.19
Array.sort() 배열 내 오브젝트 값으로 정렬하기  (0) 2022.07.08
'JavaScript' Related Articles more