JS_문법 (5)_동기/비동기 처리

동기적 처리

요청을 보낸 후, 해당 요청에 응답 받아 다음 동작 실행

(한 줄 완료 후 다음 줄 처리)

비동기 처리

요청 보낸 후, 응답에 상관없이 다음동작 실행

(한 줄 완료 상관없이 다음 줄 처리)

 

---

비동기적 처리?

대부분의 언어는 동기적 처리를 지향한다.

 

JS의 경우에는 실행이 오래 걸리면

기다릴 필요없이 다음으로 넘어가도록

비동기처리가 가능하게 되어 있다.

 

정리하면

JS는 기본적으로 동기적 처리

일부 기능 비동기적 처리 추가 제공

 

비동기 처리 지원 기능

Rest API 요청

파일 / DB 처리

타이머, 암호화 / 복호화

 

비동기 예시

setTimeout 함수

setTimeout(functoin, milliseconds)

- millisecons : ms 만큼 기다리기

- function : ms만큼 기다린 후, 호출할 함수

 

console.log("Hello")
setTimeout(() => {console.log("My name is")}, 3000)
console.log("Kassid")

>>>
Hello
Kassid
My name is

위의 사진을 보면

2번 째 줄이 실행이 되고 완료가 되지 않았지만

3번 째 줄이 실행이 된 모습니다.

 

(2번 째 줄이 비동기 처리를 지원하는 함수이기 때문)

 

비동기 처리 문제점?

예시로

Rest API를 호출해서 클라이언트에서 서버에 요청을 한 후

그 결과값으로 다음 코드를 진행해야하는데

비동기 처리로 인해 다음 코드가 실행이 되면

문제가 발생한다..!!

---

해결방법

1. 콜백함수 callback

JS는 first-class function이다.

즉,

함수 자체를 변수에 저장 가능하고

함수의 인자에 다른 함수를 인수로 넣을 수 있다.

또한 return값으로 함수를 전달할 수 있다.

 

function func1(callback) { //함수를 인수로 전달
    setTimeout(()=>{
        console.log("func1")
        callback() //인수로 받아온 함수 실행
    },100)
}

function func2() {
    console.log("func2")
}

func1(func2)

>>>
func1
func2

하지만 이렇게 되면

콜백함수 안에 콜백함수 안에 콜백함수 ,,,,,

이렇게 계속 들어가야한다.

 

2. Promise

callback함수의 단점을 극복하기 위해 고안된 문법이다.

1)
new로 Promise생성을한다.

2)
Promise 객체에 전달되는 함수는 executor 라고 부른다.
이 함수는 new Promise가 만들어질 때 자동으로 실행되고
resolve, reject라는 두 개의 함수를 인자로 받아서 비동기 처리함수를 실행한다. 

3)
executor를 통해 비동기 처리 후
resolve, reject 함수 호출
(resolve : 성공 시 / reject : 실패 시)

 

then 메서드

성공, 실패 시의 수행 작업 정의 &

promise 코드 실행

 

promise.then(successCallback, failCallback)

 

 

 

 

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 9) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func.then((item) => { 	//successCallback
    console.log('success', item)    
}, (err) => {		//failCallback
    console.log(err)
})

>>>
success 10

 

만약 then 메서드에 하나만 선언한다면

successCallback 동작만 선언한 셈이다.

func.then((item) => { 	//successCallback
    console.log('success', item)    
})

---

동기 처리를 하는 범위는

Promise에 전달된 함수에 대해서만 이다.

 

 

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 9) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func.then((item) => { 	//successCallback
    console.log('success', item)    
}, (err) => {		//failCallback
    console.log(err)
})
console.log("Hello")

>>>
Hello
success 10

따라서 위의 예시에서

Hello가 먼저 출력이 되는 것이다.

 

만약 순차적으로 계속해서 이어져야 하는 경우

아래와 같이

.then을 붙여주면 된다.

 

 

const func = new Promise(
    (resolve, reject) => { 	//성공, 실패 함수인수로 받기
        setTimeout(() => { 	//비동기 함수 실행
            let num = 10	
            if (num > 9) {	
                resolve(num)	//successCallback
            } else {
                reject("error")	//failCallback
            }
        }, 1000);
    }
)

func.then((item) => { 	//successCallback
    console.log('success', item)    
}, (err) => {		//failCallback
    console.log(err)
}).then(()=>{
    console.log("Hello")
})


>>>
success 10
Hello

 

정리하면

비동기적으로 처리하는 함수가 중간에 있고,

이 함수가 끝난 뒤에 

이어져야 하는 코드들의 경우에는

Promise를 이용해서

순서 관리를 하는 것이다.