카테고리

분류 전체보기 (68)
JAVA-기본 (7)
JAVA-AWT (24)
JAVA-클래스의 중요메소드 (23)
JAVA-람다식 (0)
Android Studio (7)
Python (1)
OpenCV (1)
AWS (0)
webrtc (0)
javascript (4)
처리방침 (1)
rss 아이콘 이미지

Search

'Promise'에 해당되는 글 2건

  1. 2023.02.14 javascript Promise Async/Await
  2. 2023.02.13 javascript Promise

javascript Promise Async/Await

javascript/기본 2023. 2. 14. 02:35 Posted by IT-개발자
반응형

자바스크립트에서 비동기 처리를 위한 콜백함수 사용 시 콜백 지옥을 해결할 수 있는 것이 Promise입니다. Async/Await 는 비동기 처리 문법으로 가장 최근에 나온 문법으로 ES8에 해당하며 Promise를 쉽게 사용할 수 있도록 합니다.

 

  • Async는 함수 앞에 선언되며 Async의 결과는 Promise 객체로 return 됩니다.
  • Await는 Async와 쌍을 이루어 사용하여 Await를 사용하면 함수앞에 Async를 작성해야 한다.
  • Promise와 차이점은 기존 함수에 Async를 작성하는 것처럼 구성되어 간결하다.
  • 가장 큰 차이점은 비동기 처리에 사용되는 문법이지만 코드 실행을 동기적으로 코딩을 할 수 있는것 입니다.

실무에서 많이 사용되니 실습을 통해 살펴보도록 하겠습니다.

 

실습:

async 를 함수 test앞에 작성하고 console.log("result_promise "+result_promise); 를 확인하면 Object 는 Promise 임을 알 수 있습니다. 그리고 then 함수는 Promise에서 사용하는 것으로 async 는 Promise 객체를 반환하는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        async function test(value) {
           return (value+1);
        }
       
        let result_promise = test();
        console.log("result_promise "+result_promise);
       
        test(1).then((value) => console.log("value:"+value));
    </script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const f = async (value) => {
            return value+1;
        }

        f(3).then((value) => console.log(value))
    </script>
</body></html>

실습: 

await 는 비동기 처리에서 동기 형태의 로직을 사용할 수 있게 하는 것으로 해당 로직을 기다리게 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const timer = () => {
            return new Promise(resolve => setTimeout(resolve, 1000));
          };
         
          async function wait(){
            await timer();
            return "wait";
          };


         async function test(){
            const waitstr = awaitwait();
            return waitstr;
         }
         
         test().then(console.log)
    </script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        const timer = () => {
            return new Promise(resolve => setTimeout(resolve, 1000));
          };
         
          async function wait(){
            timer();
            return "wait";
          };


         async function test(){
            const waitstr = wait();
            return waitstr;
         }
         
         test().then(console.log)
    </script>
</body></html>

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

반응형

'javascript > 기본' 카테고리의 다른 글

javascript setTimeout, setInterval  (0) 2023.02.15
javascript Promise  (0) 2023.02.13
javascript 연산자 기초  (0) 2023.02.12

javascript Promise

javascript/기본 2023. 2. 13. 01:11 Posted by IT-개발자
반응형

자바스크립트에서 비동기 처리를 위한 콜백함수 사용 시 콜백 지옥을 해결할 수 있는 것이 Promise입니다.

먼저, 동기(Synchronous)와 비동기(Asynchronous)에 차이에 대해 확인하도록 하겠습니다.

 

동기(Synchronous):

1. 동시에 일어난다는 의미로 직렬적으로 로직을 처리함

2. 직렬적으로 일을 처리하므로 앞의 결과가 처리될 때 까지 뒤에 로직은 대기 후 순차적으로 진행

3. 설계가 직관적임

 

비동기(Asynchronous):

1. 동시에 일어나지 않은다는 의미로 병렬적으로 로직을 처리함

2. 병렬적으로 로직을 처리하므로 앞의 로직이 끝나지 않더라도 진행

3. 설계가 복잡함

 

자바스크립트에서  비동기처리를 위해 Promise를 많이 사용하는데, 콜백 함수를 사전에 살펴보고 Promise의 내용을 확인하도록 하겠습니다.

 

callback 함수:

어떤 함수의 실행이 끝난 뒤 호출되어 사용되는 함수를 의미합니다. 아래의 표를 확인하면 call("test", callback) 함수를 호출하고 call 함수를 처리 후 callback 함수를 처리하는 형태입니다. 주로 자바스크립트에서는 ajax에 success값에 많이 사용됩니다. 이 callback함수가 많아지고 남발되면 코드 관리가 어렵고 콜백지옥에 빠지기 쉽습니다. 이를 해결하기 위해 Promise가 나온 이유입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>

     function callback(){
          console.log("콜백1");
     }


     function call(name, callback){
          console.log("name: "+name)
          callback();
     }

     call("test", callback);

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

 

Promise

아래 그림을 보면 Promise는 pending, fulfilled,reject의 상태를 가지고 있습니다.

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

  • Pending(대기중)
    Promise 객체의 기본상태를 의미하며 비동기 결과가 나오지 않는 초기 상태를 의미합니다.
  • Fullfilled(이행 완료됨)
    비동기 처리가 완료된 상태를 의미합니다.
  • Reject(거부됨)
    비동기 처리가 완료는 되었지만 연산에 실패함을 의미합니다. 

실습: 

minusTest 함수를 호출하며 num 3을 입력합니다. 그 이후 setTimeout 1초(1000millisecond) 후 실행하라는 지연함수를 싱행하고 then 함수를 순서대로 호출하고 있습니다.

then은 primise 작업이 성공했을때, 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        function minusTest(num){
            return new Promise((resolve, reject) => {
                setTimeout(function(){
                    num-=1;
                    if(num>=0)resolve(num);
                    else reject(num);
                }, 1000);
            });
        }
       
        minusTest(3).then((num)=>{
            console.log("then2: "+num);
            return minusTest(num)
        }).then((num)=>{
            console.log("then1: "+num);
            return minusTest(num)
        }).then((num)=>{
            console.log("then0: "+num);
            return minusTest(num)
        }).catch((err) => console.log("err:"+err));
       
    </script>
</body></html>

 

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

반응형

'javascript > 기본' 카테고리의 다른 글

javascript setTimeout, setInterval  (0) 2023.02.15
javascript Promise Async/Await  (0) 2023.02.14
javascript 연산자 기초  (0) 2023.02.12