IT 수업 9주차 (25) 비동기 처리

 

● 스레드  : 작업 실행 단위(실행 흐름 단위)

● 동기 : 미리 정해놓은 약속을 한번에 하나의 작업만 할 수 있도록 하는것 

              (절차흐름대로 처리 - 단일 스래드 단위)

● 비동기 : 정해진 약속대로 처리하는 것이 아니라 필요한 상황에 따라 원하는 시점에서 작업하는 것

                   (실행흐름분리 - 스레드를 따로 형성)

 

   - 약속 : 요청했을 때 응답이 와야 다른 작업 할 수 있는 것

 

 

 

● 비동기 처리함수
    - setTimeout(()=>{},millisecond) : 일정시간 이후 특정작업을 1회 수행 - 비동기 처리
    - clearTimeout(id)                         : 예약된 작업을 취소

 

 

 

 

 

● 비동기 적용하기

 

process1과 process3이 출력된 후 1초 후에 process2가 출력된다. (timeout은 밀리세컨드(millisecond))

 

중간에 코드를 더 넣어서 다시 확인해봤다.

 

 

 

예약취소버튼 하나를 더 추가하여 실행시킨 후 취소시켜 봤다.

 

취소버튼을 누르면 출력이 된다.

하지만 '취소버튼1'을 누르면 멈추지만 '취소버튼2'를 누르면 취소되지 않는 현상이 발생한다.

멈춘다

멈추지 않는다

 

 

 

< 박스에 값 넣기 >

 

● setInterval(()=>{}, millisecond)   : 주기마다 처리
● clearInterval(id)                          : setInterval 해제

 

시작 버튼을 누르면 1초마다 박스에 내용을 넣다가 정지를 누르게 되면 정지된다.

 

 

 

 

 

 

 

 

● 예외발생

다음은 예외 발생이다.

 

수행이 성공하게 되면 .then(()=>{}) 으로

수행이 실패하게 되면 .catch(()=>{}) 으로 가게 된다.

 

먼저 기본으로 값이 들어가는 박스를 만들어 준다.

 

여기서 then / catch 코드를 추가해본다.

작업이 성공하게 되면 then(result)로 넘어가 작업이 성공했다는 값이 뜨게 된다.

 

 

 

 

 

 

여기서 throw "Exception..."; 를 사용하여 억지로 예외를 발생시켜서 catch(error)로 넘겨봤다.

이렇게 작업실패라고 콘솔창에 출력된다.

 

 

 

● 동시처리

억지로 예외만든걸 주석처리한다.

동시 처리가 3초 이후에 된다.

 

 

 

 

● await / async

await를 사용하려면 function 앞에 async를 적어줘야 한다.

await를 붙이면 앞의 await를 실행한 후 뒤의 await를 순서대로 실행한다.

 

맨 처음 await프로세스1 을 실행한 후 await프로세스2가 실행 되는 것을 볼 수 있다.

 

 

 

 

 

 

await 를 붙이지 않은 프로세스를 앞에 넣으면 처음 await와 동시에 실행된다.