동기와 비동기

동기와 비동기

동기 => 먼저 실행된 코드의 결과가 나올때까지 대기하는  것

ex)커피를 시키려고 줄을 서면 주문하고 커피를 받고, 이런 과정을 반복하는 것,

비동기 => 실행된 순서와 관계없이 결과가 나오는것을 말한다.

ex) 커피를 주문 먼저 받고 나오는 순서대로 주는것, 

 

-- Blocking Model & Non-Blocking Model

 

blocking model이란 실행 제어권을 다른곳에 넘기지 않아 다른 작업을 못하고 대기

Non-Blocking Model이란 실행 제어권을 다른곳에 넘겨 다음 코드가 실행.

 

ex)

function first() {

    console.log('First');

}

setTimeout(first, 1000); // 1000ms(1초) 뒤에 first 함수를 실행해준다.

console.log('Middle');

console.log('Last');

// Print: Middle

// Last

// Firs

 

위와 같이 우리는 first가 1초뒤에 뜨고 미들, 라스트를 하고 싶어 짠 코드이지만
미들 라스트가 뜨고 1초뒤에 퍼스트가 뜬다

우리는 이런 것을 논블록 모델이라고 한다. 

 

우리는 블록모델을 이용하여 우리가 원하는 바를 이룰 수 있다.//promise을 이용해볼까??

----promise

비동기를 동기로 변경하는것을 돕는 객체 유형이다.
promise에는 resolve, reject가 인자로 주입된다.

new Promise(executor);

// 예제

new Promise((resolve, reject) => {

  // 명령문

});

 

promise에는 

• 대기(Pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(Fulfilled): 연산이 성공적으로 완료됨.
• 거부(Rejected): 연산이 실패함.

같은 상태가 있고 resolve가 실행되고 then을 붙여서 비동기 후, 끝이 난 후 코딩을 읽어줘라 이런 의미다.
예시를 볼까?

 

const resolvePromise = new Promise((resolve, reject) => {

  setTimeout(() => {

    console.log('First');

    resolve('Resolve!'); // resolve를 실행할 때, 안에 데이터를 넣어줄 수 있습니다.

  }, 1000);

});

resolvePromise.then((data) => {

  console.log('Middle');

  console.log('Last');

  console.log(data);

})

// Print: First -> 1초 뒤에 출력됩니다.

// Middle

// Last

// Resolve!

 

위 와 같이 promise라는 함수를 이용하고 안에 resolve을 이용해서 1초뒤에 first를 띄우고 then의 함수를 작용하여 미들, 라이트, 리솔버가 뜬다.

 

여기수 우리는 catch 을 이용해서 오류도 잡을 수 있다. 

 

const errorPromise = new Promise((resolve, reject) => {

  setTimeout(() => {

    console.log('First');

    reject('Error!!'); // 직접 reject를 실행하면 프로미스에서 에러가 발생한것으로 간주됩니다.

  }, 1000);

});

errorPromise.then(() => {

  console.log('Middle');

  console.log('Last');

}).catch((error) => {

  console.log('에러 발생!', error);

});

// Print: '에러 발생! Error!!'

 

위와 같이 프로미스를 하고 고의적으로 reject을 사용해서 에러를 내고 
catch문을 사용해서 에러가 발생하면  에러 발생이라는 콘솔을 띄워 에러를 잡을 수있다.

에러가 잡히기 때문에 reject, 함수가 중단된다.

 

 

--------프로미스에 대해 더 알아보고 해석하고 공부해볼까?----

1.progmise에서 resolve 된 값을 이용하는 방법

const firstPromise = new Promise((resolve, reject) => {

  resolve('First');

});

firstPromise.then((value) => {

  console.log(value);

});

// Print: 'First'

위를 해석해보면 

리솔브에 first라는 밸류,데이터를 담아두면 reject가 되지  않고 resolve로 넘어가고 then에 나온 콘솔로그 밸류인 first을 띄운다.

 

 

2. promise.then으로 함수형 프로그래밍 체험하기

 

const countPromise = Promise.resolve(0);

function increment(value) {

  return value + 1;

}

const resultPromise = countPromise.then(increment).then(increment).then(increment);

resultPromise.then(console.log);

promise. resolve 0이 먼저 실행되어서 0의 밸류를 같고있다. 

거기에 increment라는 func을 할당하고 

resultpromises을 해석하면 0을 실행하고 1을 더하고 1을 더하고 1을더해서 콘솔로 찍어라 라는 의미로
3이 나온다.