TIL 30일차

시작하며

오늘은 Promise와 async/await를 활용하여 비동기 함수를 작성하는 스프린트를 진행하였다. Node.js의 fs.readFile 메소드와 fetch API를 활용하여 코드를 작성하면서 Promise의 사용법을 익힐 수 있었다.

비동기 함수

fs.readFile

const fs = require("fs");
const getDataFromFile = function (filePath, callback) {
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      callback(err, null);  
    }
    else {
      callback(null, data);
    }
  })
};

const getDataFromFilePromise = filePath => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      }
      else {
        resolve(data);
      }
    })
  })
};

const readAllUsersChaining = () => {
  let result = [];
  return getDataFromFilePromise(user1Path)
  .then((text) => {result.push(JSON.parse(text)) 
    return getDataFromFilePromise(user2Path);
  })
  .then((text) => {result.push(JSON.parse(text))
    return result;
  })

const readAllUsers = () => {
  let result = [];
  let promise1 = getDataFromFilePromise(user1Path)
  let promise2 = getDataFromFilePromise(user2Path)
  return Promise.all([promise1,promise2])
  .then((values) => {
    result.push(JSON.parse(values[0]),JSON.parse(values[1]))
    return result
  })
}

const readAllUsersAsyncAwait = async() => {
  let result = [];
  let value1 = await getDataFromFilePromise(user1Path);
  result.push(JSON.parse(value1));
  let value2 = await getDataFromFilePromise(user2Path);
  result.push(JSON.parse(value2));
  return result;
};

fetch

function getNewsAndWeather() {
  let result = {};
  return fetch(newsURL)
    .then((data) => data.json())
    .then((data) => {
      result["news"] = data["data"];
      return fetch(weatherURL);
    })
    .then((data) => data.json())
    .then((data) => {
      result["weather"] = data;
      return result;
    });
}

function getNewsAndWeatherAll() {
  let newsData = fetch(newsURL).then((data) => data.json());
  let weatherData = fetch(weatherURL).then((data) => data.json());
  return Promise.all([newsData, weatherData]).then(
    ([newsdata, weatherdata]) => {
      return {
        news: newsdata.data,
        weather: weatherdata,
      };
    }
  );
};

async function getNewsAndWeatherAsync() {
  let newsData = await fetch(newsURL).then((value) => value.json());
  let weatherData = await fetch(weatherURL).then((value) => value.json());
  return { news: newsData.data, weather: weatherData };
}

마치며

실제 코드로 구현해보면서 Promise의 사용법을 익힐 수 있었고, .then,.catch 메소드 외에 여러개의 Promise 인스턴스를 배열 형태로 처리할 수 있는 .all에 대해서 이해할 수 있었다. fetch는 Promise의 형태로 값을 리턴해서 별도로 인스턴스를 생성할 때보다 쉽게 코드를 작성할 수 있었다. 추후에 실제 웹페이지를 만들때 비동기 함수를 어떤 방식으로 적용하는지를 알아보고 싶다.