callback과 Promise

현채은·2023년 3월 20일
0
post-thumbnail

콜백지옥,. 공부지옥... 끝이없다..........

✓ fe-sprint-async-and-promise에서 구현한 함수

  • getDataFromFile
const getDataFromFile = function(filePath, callback) {
	fs.readFile(filePatth, 'utf-8', (err,data) => {
    	if(err) { // 에러가 있을때
        	callback(err,null); // 콜백함수가 받는 인자
        } else { // 에러가 없을 때
        	callback(null, data); // 콜백함수가 받는 인자
        }
      });
    };
getDataFromFile('README.md', (err, data) => console.log(data));

🤯 콜백지옥 ( callback hell )

  • 비동기로 작동하는 코드의 순서를 제어할 수 있는 방법 중 하나 ➡️ callback
  • 근데 왜 콜백지옥이라는 말이 생겼을까 ?
  • 위 사진을 보면 알 수 있듯이 이 장풍맞은 코드 형태가 바로 콜백지옥이다 .
  • 코드가 길면 길어질 수록 가독성이 낮아진다... 🤯
    ➡️ 해결책 당연히 존재한다 !! Promise~

🔮 Promise

: 비동기로 작동하는 코드를 제어할 수 있는 또다른 방법 + 콜백지옥 방지역할 ( 안 쓸 이유 X )

  • 어떤 과정 이후 주어진 동작을 수행할 것이라는 약속
  • promise 는 class이다 !!!!
    • new 키워드를 통해 Promise 객체 생성
      • 생성자 Promise
        • 새로운 약속을 하는 코드
        • 인자로 받는 콜백함수의 첫번째 인자 : resolve ( 에러가 안뜨면 반환할 값 넣어 실행 )
        • 인자로 받는 콜백함수의 두 번째 인자 : reject ( 에러가 뜨면 반환할 값 넣어 실행 ) , resolve는 무시
      • 프로미스 인스턴스의 메서드
        • then 메서드 : resolve를 통해 반환된 결과를 인자로 하는 콜백함수를 넣음
          - ⭐️ 또 다른 프로미스 반환 (?)
        • catch 메서드 : reject를 통해 반환된 결과를 인자로 하는 콜백함수를 넣음
        • finally 메서드 : 성공하든 실패하든 실행할 콜백함수 ( 필요시에만 사용 )
        • then과 마찬가지로 체이닝으로 이용 ! (.then .catch .finally)
    • 비동기 처리를 수행할 콜백함수(executor)를 인수로 전달받음
      • 이 콜백함수는 resolve, reject 를 인수로 전달받음


➡️ 프로미스가 정상적(resolve)으로 처리된 경우의 프로미스 객체
➡️ new Promise가 할당 된 변수 promise를 호출하면 Promise 반환

➡️ 프로미스가 에러가 발생한 경우의 프로미스 객체

✓ fe-sprint-async-and-promise에서 구현한 함수

  • getDataFromFilePromise
const getDataFromFilePromise = filePath => {
	return new Promise((resolve, reject)=> { // promise 객체를 반환
    	fs.readFile(filePath, 'utf-8', (err,data)=> { // node.js fs로 파일 불러오기
        	if(err) { // 에러가 있으면?
            	reject(err) 
            }
            else { // 에러가 없으면 ?
            	resolve(data)
            }
          });
        })};
	
    
    





profile
프론트엔드 개발자

0개의 댓글