[Javascript] Callback 과 Promise 와 async-await

폴더구조

data.json 파일 내용

{
  "hello" : "world"
}

package.json 만드는 방법

npm init --yes

 

[index.js 작성]

파일을 읽는 javascript 파일 시스템 모듈

import fs from 'fs'

// 프로미스를 리턴
import fsPromise from 'fs/promises'

 

콜백함수로 표현

import fs from 'fs';

fs.readFile('data.json', 'utf-8', (err, data) => {
  if(err) {
    console.log(err)
    return
  }
  console.log("callback", data)
});

 

Promise로 표현

import fsPromise from 'fs/promises'

fsPromise.readFile('data.json', 'utf-8')
  .then(data => console.log("promise", data))
  .catch(err => console.log(err));

 

async-await로 표현

import fsPromise from 'fs/promises'

(async() => {
  try {
    const data = await fsPromise.readFile('data.json', 'utf-8')
    console.log("async", data)
  } catch(err) {
    console.log(err)
  }
})();

 

[실행결과 - 동일]

 

콜백지옥표현

import fs from 'fs'

// callback 형식의 함수 (JSON으로 변경하는 함수)
function JSONParser(data, callback) {
  setTimeout(() => {
    try{
      callback(null, JSON.parse(data)) // callback(에러, 데이터)
    }catch(err) {
      callback(err)
    }
  }, 2000)
}

// callback 형식의 함수 (대문자로 변경함수)
function Capitalize(data, callback) {
  setTimeout(() => {
    try{
      callback(null, data.toUpperCase())
    }catch(err) {
      console.log(err)
    }
  }, 2000)
}

// 데이터를 읽고 -> JSON으로 변환 -> 대문자로 변환(콜백지옥 표현식)
fs.readFile('data.json', 'utf-8', (err, data) => {
  if(err) {
    console.log(err)
    return
  }
  JSONParser(data, (err, data)=> {
    if(err) {
      console.log(err)
      return
    }
    Capitalize(data.hello, (err, data) => {
      if(err) {
        console.log(err)
        return
      }
      console.log('callback', data)
    })
  })
});

[실행결과] 

3초 뒤에 콘솔로그 찍힘

 

Promise로 표현

import fsPromise from 'fs/promises'

// 프로미스 리턴하는 함수 (JSON 변환 함수)
function JSONParserPromise(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try{
        resolve(JSON.parse(data))
      }catch(err) {
        reject(Error)
      }
    }, 2000)
  })
}            
// 프로미스 리턴함수 (대문자로 변환 함수)
function CapitalizePromise(data) {
  return new Promise((resolve, reject) => {
    if (typeof data != 'string') {
      return reject(new Error('input is not String'))
    }
    const capitalizedData = data.toUpperCase()
    resolve(capitalizedData)
  })
}
// 프로미스로 연결(데이터 파일 읽기 -> JSON 변환 -> 대문자 변환)
fsPromise.readFile('data.json', 'utf-8')
  .then(data => JSONParserPromise(data))
  .then(data => CapitalizePromise(data.hello))
  .then(data => console.log("promise", data))
  .catch(err => console.log(err));

[실행결과]

3초 뒤에 콘솔로그 찍힘

 

asnyc-awit 으로 표현

import fsPromise from 'fs/promises'

// 프로미스 리턴하는 함수 (JSON 변환 함수)
function JSONParserPromise(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try{
        resolve(JSON.parse(data))
      }catch(err) {
        reject(Error)
      }
    }, 2000)
  })
}            
// 프로미스 리턴함수 (대문자로 변환 함수)
function CapitalizePromise(data) {
  return new Promise((resolve, reject) => {
    if (typeof data != 'string') {
      return reject(new Error('input is not String'))
    }
    const capitalizedData = data.toUpperCase()
    resolve(capitalizedData)
  })
}
// async-await으로 연결(데이터 파일 읽기 -> JSON 변환 -> 대문자 변환)
(async() => {
  try {
    const data = await fsPromise.readFile('data.json', 'utf-8')
    const parsedData = await JSONParserPromise(data)
    const capitalizedData = await CapitalizePromise(parsedData.hello)
    console.log("async", capitalizedData)
  } catch(err) {
    console.log(err)
  }
})();

[실행결과]

3초 뒤에 콘솔로그 찍힘