잊어버리기 쉬운 비동기 처리

콜백(ES6 이전)


비동기 처리라면 가장 먼저 나타난 게 이거지.
const fs = require('fs');

function read(callback){
  fs.readFile('data.txt', function(data) {
    callback(data);
  });
}

read(function(data){
  console.log(data);
});
이 층이 몇 층으로 변하면 이른바 회호지옥이 된다.
fs.readFile('data1.txt', function(data1) {
  fs.readFile('data2.txt', function(data2) {
    fs.readFile('data3.txt', function(data3) {
      fs.readFile('data4.txt', function(data4) {
        fs.readFile('data5.txt', function(data5) {
          console.log(data1, data2, data3, data4, data5);
        });
      });
    });
  });
});
응...어지럽다

Promise(ES6 이후)


Promise로 돌아가면 then에서 체인화할 수 있습니다.
function read(str){
  return new Promise(function(resolve, reject){
    fs.readFile(str, function(data) {
      resolve(data);
    });
  });
}

read('data.txt').then(function(data){
  console.log(data);
});
근데 이 체인도 많아지면, 음...
그리고 각then에서 다른 파라미터를 참조할 수 없습니다(외출 한 번 필요)

var d1, d2, d3, d4, d5;

read('data1.txt').then(function(data1){
  d1 = data1
  return read('data2.txt');
}).then(function(data2){
  d2 = data2;
  return read('data3.txt');
}).then(function(data3){
  d3 = data3;
  return read('data4.txt');
}).then(function(data4){
  d4 = data4;
  return read('data5.txt');
}).then(function(data5){
  d5 = data5;
  console.log(d1, d2, d3, d4, d5);
});

async/await(ES8 이후)


ASync 함수로 + Promise가 되돌아오는 변수를 감싸고 await를 더하면 다음 처리를 기다릴 수 있습니다.
function read(str){
  return new Promise(function(resolve, reject){
    fs.readFile(str, function(data) {
      resolve(data);
    });
  });
}

// async関数でラップする
async function exec(){
  var d1 = await read('data1.txt');
  var d2 = await read('data2.txt');
  var d3 = await read('data3.txt');
  var d4 = await read('data4.txt');
  var d5 = await read('data5.txt');
  console.log(d1, d2, d3, d4, d5);
}
exec();

// もしくは、asyncの即時関数を使う
(async function(){
  var d1 = await read('data1.txt');
  var d2 = await read('data2.txt');
  var d3 = await read('data3.txt');
  var d4 = await read('data4.txt');
  var d5 = await read('data5.txt');
  console.log(d1, d2, d3, d4, d5);
})();
파라...

좋은 웹페이지 즐겨찾기