포스트

Promise, async, await, Generator

Promise, async, await, Generator

[ Promise ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const pr = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('ok') 
        reject(new Error('error'))
    }, 3000)
});

pr.then(
    function(result) {
        console.log(result + '가지러 가자');
    },
    function(err) {
        console.log(err + '다시 주문해주세요');
    }
);

console.log("시작")
pr.then(
    (result) => {
        console.log(result + '가지러 가자');
    }).catch(
        (err) => {
            console.log(err + '다시 주문해주세요');      
    }).finally(
        () => {
            console.log('---주문 끝---')
        }
    )
console.log('test');


[ Promise.all ]

모든 호출이 끝나야 끝난다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const f1 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res("2번 주문 완료");
        }, 3000);
    });
};

const f3 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res("3번 주문 완료");
        }, 2000);
    });
};

Promise.all([f1(), f2(), f3()]).then((res) => {
    console.log(res);
});


[ Promise.race ]

하나라도 완료되면 끝낸다.

1
2
3
Promise.race([f1(), f2(), f3()]).then((res) => {
    console.log(res);
});


[ async ]

1
2
3
4
5
6
7
8
9
10
11
12
13
async function getName() {
    // return "Mike";
    // return Promise.resolve("Tom")
    throw new Error("err...")
}

// console.log(getName());

getName().then((name) => {
    console.log(name);
}).catch((err) => {
    console.log(err)
}) 


[ await ]

async 내부에서만 사용가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
function getName(name) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(name);
        }, 1000);
    });
};

async function showName() {
    const result = await getName("Mike");
    console.log(result);
};

console.log("시작");
showName();


const f1 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res("1번 주문 완료");
        }, 1000);
    });
};

const f2 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(() => {
            res("2번 주문 완료");
            // rej( new Error("ERRRRRRRR"));
        }, 3000);
    });
};

const f3 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(() => {
            res("3번 주문 완료");
        }, 2000);
    });
};
console.log("시작");
async function order() {

    try {
        const result1 = await f1();
        const result2 = await f2(result1);
        const result3 = await f3(result2);
        console.log(result3);
    } catch (e) {
        console.log(e);
    }
    console.log("종료");
};

console.log("시작");
async function order() {

    try {
        const result = await Promise.all([f1(), f2(), f3()]);
        console.log(result);
    } catch (e) {
        console.log(e);
    }
    console.log("종료");
};
order();


[ Generator ]

함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능

1
2
3
4
5
6
7
8
9
10
11
12
function* fn() {
    console.log(1);
    yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    console.log(4);
    yield 3;
    return "finish";
}

const a = fn();

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.