Java script에서 Promise 란 ? (+@ Async / Await)

✨ Promise 

Promise는 단순히 비동기 작업을 더 깔끔하고 체계적으로 처리하기 위한 도구이다.

Promise가 없던 시절에 비동기 작업은 콜백 함수를 통해 처리 되었다. 

 

 

call back 함수 유명한 짤

 

 

그러면 콜백을 썼을 때와 안 썼을 때의 코드를 한번 비교해보자 ! 

 

 🔗여러 비동기 작업을 순서대로 처리 

• 콜백 중첩 (콜백 헬)

아래와 같이 코드를 작성하는 경우 가독성이 저하된다. 

fs.readFile('file1.txt', 'utf8', (err, data1) => {
    if (err) return console.error(err);
    fs.readFile('file2.txt', 'utf8', (err, data2) => {
        if (err) return console.error(err);
        fs.writeFile('result.txt', data1 + data2, (err) => {
            if (err) return console.error(err);
            console.log("Files combined successfully!");
        });
    });
});

 

 

• Promise

같은 작업을 Promise로 처리 했을 때이다. 

아래와 같이 Promise를 사용하니 가독성이 훨씬 좋아졌다.

const fs = require('fs').promises;

fs.readFile('file1.txt', 'utf8')
    .then((data1) => fs.readFile('file2.txt', 'utf8').then((data2) => data1 + data2))
    .then((combinedData) => fs.writeFile('result.txt', combinedData))
    .then(() => console.log("Files combined successfully!"))
    .catch((err) => console.error(err));

 

많이 간결해졌지만, 아직 then이 계속 반복되는게 좀 거슬린다. 

---

✨Async / Await 

위에 반복되는 then을 줄일 수 있는데 async / await 함수이다 .

기본적으로 Promsie 위에서 동작하며, 비동기 작업을 동기 작업처럼 읽기 쉽게 만들어준다.

async / await으로 훨씬 더 간결해진 코드를 봐보자. 

const fs = require('fs').promises;

async function combineFiles() {
    try {
        const data1 = await fs.readFile('file1.txt', 'utf8');
        const data2 = await fs.readFile('file2.txt', 'utf8');
        const combinedData = data1 + data2;
        await fs.writeFile('result.txt', combinedData);
        console.log("Files combined successfully!");
    } catch (err) {
        console.error(err);
    }
}

combineFiles();

• Promise와 async / await로 훨씬 코드가 직관적으로 보기 좋아졌다. 

---

Promise나 async/await을 쓴다고 작업 자체의 속도가 빨라지는 것은 아니다.

애초에 비동기 작업의 실행 로직을 변경하는게 아니기 때문이다. 

 

하지만 위의 문법을 통해 가독성을 향상 시키고, 에러 처리 개선 등의 장점을 가져 갈 수 있다. 

 

결론 : 왠만하면 Promise / async/await 써라 ! 

---

+@ 실행 순서가 헷갈린다면 !! 

await가 있는 비동기 작업은 실행 중인 동안, JS의 다른 작업을 처리할 수 있다 . 

await는 해당 Promise가 처리될 때까지 현재 함수의 실행을 일시 중단한다.

 

아래의 코드 예시로 실행 순서를 이해해보자.

const fs = require('fs').promises;

async function readFiles() {
    console.log("Start reading files");

    const data1 = await fs.readFile('file1.txt', 'utf8');
    console.log("File 1 read:", data1);

    const data2 = await fs.readFile('file2.txt', 'utf8');
    console.log("File 2 read:", data2);

    const combinedData = data1 + data2;
    console.log("Combined Data:", combinedData);
}

console.log("Before calling readFiles");
readFiles();
console.log("After calling readFiles");

 

# 실행 결과
Before calling readFiles
Start reading files
After calling readFiles
File 1 read: Hello, 
File 2 read: World!
Combined Data: Hello, World!