자바스크립트 비동기 promise, 콜백함수 예제

오늘은 자바스크립트의 비동기 처리에 대해 알아보도록 하겠습니다.

비동기 처리란 무엇일까요?

동기 처리는 요청을 보낸 후 해당 응답을 받고 다음 동작을 수행하는 방식입니다.

비동기는 요청을 보낸 후 응답을 받기 전에 다음 동작을 수행하는 방식으로,

병렬로 처리된다고 생각하시면 됩니다.

서버에 어떤 요청을 보낸다고 할 때 분기가 발생한다고 볼 수 있지요.

비동기 처리에는 크게 두 가지 방식이 있습니다.

콜백 함수, Promise (이밖에도 방법은 있지만 오늘은 이 두 가지를 알아보도록 하겠습니다.)

콜백 함수는 비동기 처리에서 응답을 받았을 때 실행할 코드입니다.

예를 들어 서버에서 특정 데이터를 받아 표시해 주어야 한다면 데이터를 표시해 주는 코드는 콜백 함수에 넣어줘야 하지요.

콜백 함수의 예시는 아래와 같습니다.

nodejs에서 주어지는 fs라는 패키지는 파일을 읽어오는 기능을 수행합니다.

file_1.txt는 balmo라는 문자열을 file_2.txt는 story라는 문자열을 갖고 있습니다.

fs에는 readfile이라는 비동기 함수가 있습니다. 인자로는 파일의 위치가 있고 그다음으로 콜백 함수가 들어옵니다.

(err, res)=>{}이 부분이 콜백 함수입니다.

err은 에러를 담고 res는 응답으로 온 데이터를 담습니다.

 

var fs = require("fs");

fs.readFile("data/file_1.txt", (err, res) => {
    if (err) {
        console.log(err);
        return;
    }
    console.log(res.toString());
    fs.readFile("data/file_2.txt", (err, res) => {
        if (err) {
            console.log(err);
            return;
        }
        console.log(res.toString());
    })
})

 

결과는 다음과 같습니다.

위의 콜백 함수를 이용한 처리는 중복되는 부분이 많고 })괄호가 매우 복잡합니다.

코드가 길어지면 그 복잡도는 기하급수적으로 증가하겠지요.

이런 문제를 해결해 주는 것이 promise입니다.

promise는. then. catch를 사용해 비동기 처리를 깔끔하게 할 수 있도록 합니다.

promise를 사용하기 위해서는 bluebird 패키지가 필요합니다.

이 패키지는 promise를 사용할 수 없는 패키지에서도 사용할 수 있도록 합니다.

promise는 map 등 과같은 다양한 함수를 갖고 있어 아래와 같이 처리가 훨씬 간단해집니다.

var Promise = require('bluebird')
var fs = require("fs");
Promise.promisifyAll(fs);

var filenames=['data/file_1.txt','data/file_2.txt'];
Promise.map(filenames, function(fileName) {
    return fs.readFileAsync(fileName);
}).then(function(res) {
    for(i in res){
       console.log(res[i].toString()); 
    }
}).catch((err)=>{
    throw err
})