[JS] 자바스크립트 동기(synchronous)/비동기(Asynchronous)

동기식(synchronous)

-  현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것

-  즉, 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 작업이 끝나면 새로운 작업을 시작하는 것

-  분기문, 반복문, 함수 호출 등이 동기적으로 실행

-  코드의 흐름과 실제 제어 흐름이 동일

-  싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면 프로그램 정지

 

비동기식(Asynchronous)

-  시작된 작업의 완료 여부와 상관없이 새로운 작업을 시작하는 방식

 

---

 

자바스크립트는 다른 멀티스레드 프로그래밍 언어(자바, C++)와 다른 방식으로 비동기 동작을 처리한다.

 

자바스크립트의 비동기

- 자바스크립트 엔진은 비동기 처리를 제공하지 않는다.

- 비동기 코드는 정해진 함수를 제공하여 활용, 이 함수를 API라고 함

- 비동기 API 예시로, setTimeout, XMLHttpRequest,fetch 등의 Web API 존재

 

자바스크립트 엔진

• 하나의 메인 스레드로 구성
• 코드를 읽어 한 줄씩 실행
• 브라우저 환경에서 유저 이벤트를 처리하고 화면을 그림

 

// 타이머 비동기 처리
setTimeout(()=>console.log('타이머 끝'),1000)

// 네트워크 처리
fetch('http://google.com')
    .then(()=>console.log('네트워크 요청 성공'))
    .catch(()=>console.log('네트워크 요청 실패'))

 

비동기 처리 모델

- 비동기 코드를 처리하는 모듈은 자바스크립트 외부에 존재

- 이벤트 루프, 태스크 큐, 잡 큐 등으로 구성

- API 모듈은 비동기 요청을 처리한 수 태스크 큐에 콜백 함수를 넣는다

- 자바스크립트 엔진은 콜 스택이 비워지면 태스크 큐의 콜백 함수 실행

 

Promise

promise란 자바스크립트에서 제공하는 비동기를 간편하게 처리하도록 도와주는 객체이다.

promise를 사용하면 비동기 작업이 종료된 후 성공과 실패의 경우를 처리할 수 있다.

• 비동기 작업 표현하는 자바스크립트 객체
• 비동기 작업의 진행, 성공, 실패 상태 표현
• 비동기 처리의 순서 표현 가능

promise 상태

• 대기 pending : 비동기 처리 로직이 미완료 상태
• 이행 fulfulled : 비동기 처리가 성공적으로 완료되어 결과 값 반환 상태
• 거부 rejected : 비동기 처리 실패하거나 오류가 발생한 상태

Promise API

- 비동기 API중 하나

- 태스크 큐가 아닌 잡 큐(Job queue, 혹은 microtask queue)를 사용

- 잡 큐는 태스크 큐보다 우선순위 높음

 

Promise 생성

let promise = new Promise((resolve,reject)=>{
    if(/*비동기 작업 수행 성공*/){
        resolve('성공')
    }else{
    	reject('실패')
    }
})

- new Promise(callback) : callback 함수는 (resolve,reject) 두 인자를 받음

- Promise 성공 시 resolve, 실패 시 reject 호출

 

Promise 사용

promise
    .then(data=>{
        console.log("성공",data)
    })
    .catch(e=>{
        console.log("실패",e)
    })
    .finally(()=>{
        console.log("promise 종료")
    })

- then() : 메서드에 성공했을 시 실행할 콜백함수

- catch() : 메서드에 실패했을 시 실행할 콜백함수

- finally() : 성공/실패 여부 상관없이 모두 실행할 콜백함수

- then(callback1,callback2) : callback1 자리에 성공, callback2 자리에 실패 메서드를 인자로 넘김

 

 

Promise 체이닝

-      Then/catch 메서드가 또 다른 promise를 리턴하여, 비동기 코드에 순서 부여

-      동일한 객체에 메서드를 연결할 수 있는 것을 체이닝이라고 함

 

 

Promise.resolve/Promise.reject

Promise
    .resolve(10)
    .then(console.log)
    
Promise
    .reject("Error")
    .catch(console.log)

- Promise.resolve 함수는 성공한 Promise 반환

- Promise.reject 함수는 실패한 Promise 반환

- 인위적으로 Promise 메서드 체인을 만들 수 있음

- 비동기 코드로 진행하는 상황에서 유용하게 사용

 

 

Promise.all

Promise.all([
    p1,p2,p3
])
    .then(values=>{
        console.log('모두 성공',values)
    })
    .catch(e=>{
        console.log('하나라도 실패',e)
    })

– Promise.all은 promise 배열을 받아 모두 성공 시 Promise의 resolved 값을 배열로 반환

- Promise 하나라도 실패 시 가장 먼저 실행한 Promise의 실패 이유를 반환