[node.js입문] js 동기와 비동기 함수와 비동기 처리의 시작

1. 동기와 비동기 

 1)동기(synchronous):

자바스크립트의 경우 기본적으로 동기적인 언어이다.  동기적이라는 것은 위에서부터 순차적으로 시행한다는 것이다

예제코드

Console.log(‘1’);
Console.log(‘2’);
Console.log(‘3’);

 

위 코드의 경우 순서대로 읽어서 1,2,3을 출력하는 동기적인 함수의 예시이다.

 

2)  비동기(asynchronous)

비동기적인 것은 언제 코드가 실행될 수 있는지 모르는 것으로 대표적으로 setTimeOut과 같은 함수가 있다.

SetTimeOut은 웹api로 우리가 지정한 시간이 지나면 콜백함수를 불러와준다.

l  여기서 call back 함수란 우리가 전달해준 함수를 나중에 다시 불러와 주는 함수를 의미.

function printnow(print){
    print();
}

console('1');
setTimeout(()=>console.log('2'),1000);
console('3');
printnow(()=>console.log('hello'))

콘솔로그 출력(동기)-> 2.브라우저에게 요청(비동기)->3 콘솔로그 출력(동기)-> 4 함수를 선언했으므로 위로 가서 함수를 불러오고 바로 출력(동기)

 

 

2. 콜백지옥

class UserStorage {
    loginUser(id, password, onSuccess, onError) {
      setTimeout(() => {
        if (
          (id === 'ellie' && password === 'dream') ||
          (id === 'coder' && password === 'academy')
        ) {
          onSuccess(id);
        } else {
          onError(new Error('not found'));
        }
      }, 2000);
    }
  
    getRoles(user, onSuccess, onError) {
      setTimeout(() => {
        if (user === 'ellie') {
          onSuccess({ name: 'ellie', role: 'admin' });
        } else {
          onError(new Error('no access'));
        }
      }, 1000);
    }
  }
  
  const userStorage = new UserStorage();
  const id = prompt('enter your id');
  const password = prompt('enter your passrod');
  userStorage.loginUser(
    id,
    password,
    user => {
      userStorage.getRoles(
        user,
        userWithRole => {
          alert(
            `Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
          );
        },
        error => {
          console.log(error);
        }
      );
    },
    error => {
      console.log(error);
    }
  );

*Error은 자바스크립트에서 제공하는 오브젝트 중 하나 보통 에러오브젝트에는 어떤 에러가 발생했는 지 명시해서 작성한다.

id와 passward를 받아서 -> login을 하고 ->성공적이라면 쓰인 아이디를 받아와서 역할을 요청 -> 역할을 받으면 출력

이 코드의 경우 너무 많은 callback 함수를 사용하여 전달할 것이 많아져 소위 콜백지옥이라고 불린다.

콜백지옥의 문제점은

  (1) 디버깅 하기 어렵다

  (2)가독성이 좋지 않다

  (3)유지보수가 어렵다

등등..

이를 타파하기 위해 async나 promise를 활용해볼 수 있다.

 

 

3. promise

Promise란 js에서 제공하는 오브잭트로 콜백함수 대신에 비동기를 간편하게 처리해줄 수 있다.

const promise = new Promise((resolve, reject)

Promise는 resolve와 reject라는 콜백함수를 받는 executor라는 콜백함수를 전달해준다.

Promise는 약속된 기능을 수행하고(resolve) 나서 정상적으로 기능이 수행되어졌으면 성공의 메시지와 함께 처리된 결과값을 전해주고 수행이 잘못되었다면 에러를 도출한다(reject).

 

Promise의 상태:

1) pending: Promise가 만들어져서 오퍼레이션이 수행중일때는 pending

2)fulfilled: pending이 충족되었을 때,완벽완료

3) rejected: 모종의 오류가 있을 때

 

예제코드

  const promise = new Promise((resolve, reject) => {
    console.log('doing something...');
    setTimeout(() => {
      resolve('ellie');
    }, 2000);
  });

여기서 Promise안에 네트워크와 통신하는 코드를 작성했을 경우 바로 통신하게 된다 따라서 만일 사용자가 버튼을눌렀을 때나 사용자가 요구할 때 네트워크통신을 해야하는 경우에는 유의해야한다.  새로운 promise가 만들어질 경우 executor은 자동적으로 실행되기 때문이다.

 

+)promise에서 사용할 수 있는 다양한 api 

  .then(value => {
    console.log(value);
  })

.then: 오퍼레이팅이 성공적인 케이스를 다루는 api

  .catch(error => {
    console.log(error);
  })

.catch:에러를 다루는 api

.finally(() => {
    console.log('finally');
  });

.finally: 에러 여부와 상관 없이 반드시 마지막에 시행함