[JavaScript] Promise객체 - 1️⃣ 비동기 작업 처리란? & Promise 객체 생성과 콜백함수 사용

728x90

SMALL

1. 비동기 처리란 ❓

작업을 실행하는 동안 프로그램의 실행 흐름이 차단되지 않고 다른 작업을 수행할 수 있도록 하는 것
작업의 완료 여부를 기다리지 않고 다른 작업을 수행할 수 있는 것

2. 자바스크립트에서의 비동기 작업 처리

자바스크립트에서는 주로 비동기 작업 처리를 위해 콜백 함수(callback function)를 사용
콜백 함수는 비동기 작업이 완료되면 호출되는 함수로, 작업 결과를 전달받아 필요한 처리를 수행할 수 있음
콜백 함수를 등록하여 작업이 완료될 때마다 필요한 처리를 수행할 수 있음
하지만 콜백 함수를 사용하면 코드가 복잡해지고 가독성이 떨어지는 문제가 발생
이를 해결하기 위해 Promise 객체나 async/await 키워드를 사용

3. 프로미스(Promise) 객체

자바스크립트 비동기 처리에 사용되는 객체
주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

3-1. 프로미스를 사용하는 이유

비동기 처리 시점을 명확하게 표현
연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연
코드의 유지 보수성이 증가

const 프로미스 객체 = () => new Promise((resolve, reject)=> {

    })
    
    
   // 비동기 처리가 성공 또는 실패 등의 상태 정보를 갖게됨
   // resolve가 호출된 경우: 성공
   //  reject이 호출된 경우: 
   

프로미스를 리턴받은 객체
.then(정상적으로 프로미스 객체가 리턴되었다면 필요한 일을 수행)
.catch(에러객체가 리턴되었다면 에러를 처리)
.finally(최종적으로 처리할 일을 수행)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise1</title>
</head>
<body>
    <h2>promise1</h2>
    <script>
        function runInDelay(seconds){
            return new Promise((resolve, reject) => {
                if(!seconds || seconds <0){
                    reject(new Error('seconds가 0보다 작음'));
                }
                setTimeout(resolve, seconds*1000)  // 입력받은 초(sec) *1000(ms)
            });
        }
        //  성공
        runInDelay(3)  // 3초(3 * 1000)
            .then(() => console.log('타이머가 완료되었습니다')) 
            .catch(console.error)  // 콘솔창에 에러 표기
            .finally(() => console.log('모든 작업이 끝났습니다'))

        
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise1</title>
</head>
<body>
    <h2>promise1</h2>
    <script>
        function runInDelay(seconds){
            return new Promise((resolve, reject) => {
                if(!seconds || seconds <0){
                    reject(new Error('seconds가 0보다 작음'));
                }
                setTimeout(resolve, seconds*1000)  // 입력받은 초(sec) *1000(ms)
            });
        }
        //  성공
        // runInDelay(3)  // 3초(3 * 1000)
        //     .then(() => console.log('타이머가 완료되었습니다')) 
        //     .catch(console.error)  // 콘솔창에 에러 표기
        //     .finally(() => console.log('모든 작업이 끝났습니다'))
        
        // 실패
        runInDelay()  // seconds 값을 주지않음 -> 에러
            .then(() => console.log('타이머가 완료되었습니다'))  // 실행x
            .catch(console.error)  // 콘솔창에 에러 표기
            .finally(() => console.log('모든 작업이 끝났습니다'))
        
    </script>
</body>
</html>

▲ catch 블록에 작성된 에러객체가 찍히고 finally블록에 작성된 구문 출력

MDN: Promise

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

developer.mozilla.org

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] Promise 객체 - 3️⃣ all(), allSettled(), race() (0)	2023.04.20
[JavaScript] Promise객체 - 2️⃣ promise 콜백함수 축약형으로 작성하기! (0)	2023.04.20
[JavaScript] 예외처리 - try~catch~finally, throw문 (0)	2023.04.20
[JavaScript] map 객체 - has(), get(), set(), delete(), clear(), entries(), values() (0)	2023.04.20
[JavaScript] 세트(Set) - add(), has(), delete(), clear() (0)	2023.04.20