非同期タスクを順番に実行


非同期タスクは、同期順に実行する必要がある場合があります.Promise.allでは、アレイ内の非同期タスクをアレイ順に実行できますが、実行の完了を待たずに実行できます.
const list = [1, 2, 3, 4, 5];

function sleep(value) {
  return new Promise(resolve => {
    console.log(`실행순서 : ${value}`);
    setTimeout(() => {
      console.log(`결과 : ${value}`);
      resolve();
    }, (list.length - value) * 500);
  });
}

console.time('시간');

Promise.all(
  list.map((item) => sleep(item))
).then(() => {
  console.timeEnd('시간');
});
上記のコードを実行すると、次の結果が得られます.私たちは1つのタスクが完了した後に次のタスクを実行することを望んでいます.そのため、promise.allは要求に合致しません.
실행순서 : 1
실행순서 : 2
실행순서 : 3
실행순서 : 4
실행순서 : 5
결과 : 5
결과 : 4
결과 : 3
결과 : 2
결과 : 1
非同期動作が完了すると、thenを使用して非同期動作を再処理することができる.
sleep(list[0])
  .then(() => {
  	return sleep(list[1]);
  })
  .then(() => {
  	return sleep(list[2]);
  })
  .then(() => {
    return sleep(list[3]);
  })
  .then(() => {
    return sleep(list[4]);
  })
上記のコードを実行すると、前の非同期操作が完了すると、次の非同期操作が実行されます.
上記のコードreduceを用いて、コードをより簡潔に記述することができる.
const list = [1, 2, 3, 4, 5];

function sleep(value) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, (list.length - value) * 500);
  });
}

console.time('시간');

list.reduce((promise, item) => {
  return promise.then(() => sleep(item));
}, Promise.resolve())
.then(() => {
  console.timeEnd('시간');
});