1、JS依次執(zhí)行多項(xiàng)異步任務(wù)

• 有時(shí)候，我們希望批量執(zhí)行一組異步任務(wù)，但是不是并行，而是依次執(zhí)行，這組任務(wù)是動(dòng)態(tài)的，在一個(gè)數(shù)組里，當(dāng)然我們可以用 for 循環(huán)然后一個(gè)一個(gè) await 執(zhí)行，但是還有另外一種方式：

async function taskReducer(promise, action){
  let res = await promise;
  return action(res);
}

function sleep(ms){
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask(i){
  await sleep(500);
  console.log(`task ${i} done`);
  return ++i;
}


[asyncTask, asyncTask, asyncTask].reduce(taskReducer, 0);

在上面的例子里，我們定義了一個(gè) taskReducer：

async function taskReducer(promise, action){
  let res = await promise;
  return action(res);
}

這個(gè) reducer 的兩個(gè)參數(shù)是 promise 和 action，promise 是代表當(dāng)前任務(wù)的 promise，而 action 是下一個(gè)要執(zhí)行的任務(wù)。我們可以 await 當(dāng)前 promise 執(zhí)行當(dāng)前任務(wù)，然后將執(zhí)行結(jié)果傳給下一個(gè) action 就可以了。

這樣我們可以調(diào)用：

[task1, task2, task3, ...].reduce(taskReducer, init);

不管這些任務(wù)是同步還是異步都可以被依次執(zhí)行。需要注意的是，每一個(gè)任務(wù)的返回值將是下一個(gè)任務(wù)的輸入 promise 或者 value。

2、generator 與 async/await 一同使用

將上面的代碼進(jìn)一步擴(kuò)展，我們發(fā)現(xiàn)，它可以支持 generator 與 async/await 一同使用：

async function reducer(promise, action){
  let res = await promise;
  return action(res);
}

function tick(i){
  console.log(i);
  return new Promise(resolve => setTimeout(()=>resolve(++i), 1000));
}

function continuous(...functors){
  return async function(input){
    return await functors.reduce(reducer, input)
  }
}

function * timing(count = 5){
  for(let i = 0; i < count; i++){
    yield tick;
  }
}

continuous(...timing(10))(0);

在上面的例子里，我們定義了一個(gè)計(jì)時(shí) tick 函數(shù)，我們通過(guò) timing 來(lái)連續(xù)調(diào)用它，而 timing 是一個(gè) generator，計(jì)時(shí)器顯然是異步函數(shù)，然而我們可以：

continuous(...timing(10))(0);

而這里的 continuous 其實(shí)就是前面的 reduce 的封裝。