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의 형태로 값을 리턴해서 별도로 인스턴스를 생성할 때보다 쉽게 코드를 작성할 수 있었다. 추후에 실제 웹페이지를 만들때 비동기 함수를 어떤 방식으로 적용하는지를 알아보고 싶다.
Author And Source
이 문제에 관하여(TIL 30일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bbaa3218/TIL-30일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)