콜백,Promise

Jay·2020년 11월 10일
0

동기와 비동기의 차이

동기: 요청을 보낸 후 응답을 받을때 까지 기다리고, 그 다음 동작을 실행한다
ex) 한줄로 서서 표사기
비동기: 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행한다
ex) 카페

console.log('1');
setTimeout(function() {
 console.log('2')
}, 1000)
console.log('3')
console.log('0')

// 1,3,0,2 순으로 출력되는 것을 볼 수 있다

비동기 컨트롤 (callback, Promise, async)

1. Callback

:처리해야하는 이벤트들을 콜백함수를 이용해 순차적으로 넣어준다.

콜백 지옥(callback hell) 에 빠질수도 있음을 알아두어야한다
*콜백 지옥 : 매개변수로 넘겨지는 콜백함수가 반복되어 코드의 들여쓰기 수준이 매우 깊어져 가독성이 떨어지는 현상 (아래, 콜백지옥)

단점

ㄴ 위에 설명한 콜백지옥
ㄴ 에러 핸들링의 어려움
으로인해, Promise가 등장했다(ES6 이상)

2. Promise

: 향후에 언젠가 값을 생산해내는 객체 , new키워드를 사용하여 생성한다.

알고 넘어가야할 상태 값

settled = 아래의 rejectresolve로 나눌 수 있다.
resolve = 성공한 비동기 요청을 받아서 반환 (값)
reject = 실패한 비동기 요청을 받아서 반환 (에러)
finaly = 충족, 거부 여부 상관없이 (에러를 반환하더라도) , 무조건 실행됨

오늘 node.js 환경에서 활용한 내용 // readme 파일의 내용을 읽으시오
const getDataFromFilePromise = (filePath) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (data) {
        resolve(data);
      } else {
        reject(err);
      }
    });
  });
};

getDataFromFilePromise('README.md').then((data) => console.log(data));

3. async

: 코드의 실행순서와 복잡도 관련하여 개선한 최신문법
직관적이며, await 이라는 키워드를 사용하여 실행을 지연할 수도 있다.

 2번의 짜놓은 코드를 활용하여, 다른 파일들의 데이터를 합치는 작업을 해주었다 
const user1Path = path.join(__dirname, 'files/user1.json');
const user2Path = path.join(__dirname, 'files/user2.json');

const readAllUsersAsyncAwait = async () => {
  let arr = [];
  const user1 = await getDataFromFilePromise(user1Path);
  const user2 = await getDataFromFilePromise(user2Path);
  arr.push(JSON.parse(user1));
  arr.push(JSON.parse(user2));
  return arr;
};

readAllUsersAsyncAwait();
profile
programming!

0개의 댓글