用Promise、Generator、Async函數(shù)將異步操作同步化

jaysun 發(fā)布于2019-08-21 16:22 / 704人閱讀

摘要：函數(shù)最簡(jiǎn)單，不需要借助其他的執(zhí)行器即可按照順序執(zhí)行。函數(shù)執(zhí)行過程中遇到就會(huì)交出執(zhí)行權(quán)限，等到異步操作完成再進(jìn)行下面的操作，語(yǔ)句返回的是方法的參數(shù)。小程序不支持函數(shù)，并且同時(shí)間最多支持個(gè)請(qǐng)求，所以被迫無(wú)奈，只能使用來做異步批量調(diào)用。

在日常開發(fā)的過程中總會(huì)遇到一些下一個(gè)請(qǐng)求需要上一個(gè)請(qǐng)求的響應(yīng)數(shù)據(jù)作為參數(shù)（或者坑爹的小程序開發(fā)只能同時(shí)最多請(qǐng)求5個(gè)），那么這個(gè)時(shí)候我們就需要批量地請(qǐng)求一批后再請(qǐng)求一批。

Async函數(shù)

首先來介紹一下Async函數(shù)方式，Async函數(shù)是ES7添加的，目前babel方面已支持，所以可以大膽使用。Async函數(shù)最簡(jiǎn)單，不需要借助其他的執(zhí)行器即可按照順序執(zhí)行。下面來看個(gè)例子。

//  正常情況下，await命令后面是一個(gè) Promise 對(duì)象。如果不是，會(huì)被轉(zhuǎn)成一個(gè)立即resolve的 Promise 對(duì)象。
async function requestList() {
    let res1 = await new Promise((resolve) => {
        setTimeout(() => {
            resolve("ok");
        }, 100);
    });
    let res2 = await new Promise((resolve) => {
        setTimeout(() => {
            resolve("ok2");
        }, 100);
    });
}

var promise = requestList();

Async函數(shù)執(zhí)行過程中遇到await就會(huì)交出執(zhí)行權(quán)限，等到異步操作完成再進(jìn)行下面的操作，await 語(yǔ)句返回的是Promise resolve方法的參數(shù)。

Genrator函數(shù)

Genrator函數(shù)比起Async函數(shù)就像是Async函數(shù)是Genrator的語(yǔ)法糖，我們來看一下。

function* gen(){
  try {
    let a = yield new Promise();
    let b = yield new Promise();
    let c = yield new Promise();
  } catch (e) {
    console.log("e");
  }
  yield console.log("c");
}

let g = gen();

執(zhí)行Generator函數(shù)不會(huì)像Async函數(shù)那樣自動(dòng)執(zhí)行全部異步操作，而是返回一個(gè)執(zhí)行器，這個(gè)執(zhí)行器有next/throw/return三個(gè)方法可以讓Generator函數(shù)里動(dòng)起來。如果我們想要向Async函數(shù)那樣不用自己next next next無(wú)止境地調(diào)用，那么我們需要一個(gè)自動(dòng)執(zhí)行的方法。

function go(gen) {
  var g = gen();

  next(g.next());

  function next(res) {
    if (res.done) return value;
    res.value.then((data) => {
      next(g.next(data));
    }).catch((err) => {
      console.error(err);
      next(g.throw(err));
    });
  }
}

Promise

小程序不支持Generator函數(shù)，并且同時(shí)間最多支持5個(gè)請(qǐng)求，所以被迫無(wú)奈，只能使用Promise來做異步批量調(diào)用。
因?yàn)閷?shí)例化一個(gè)Promise對(duì)象就會(huì)馬上進(jìn)行異步操作，所以以下的方式是不行的

let res1 = new Promise();
let res2 = new Promise();
let res3 = new Promise();
let res4 = new Promise();

四個(gè)異步操作是同時(shí)進(jìn)行而不是一個(gè)接一個(gè)進(jìn)行，現(xiàn)在我們要同步化這些異步操作怎么做呢？

function goPromise(arr) {
  var index = 0;

  run(ajax(arr[index]));

  function run(p) {
    index++;
    p.then((data) => {
      console.log(data);
      if (index < arr.length) {
        run(ajax(arr[index]));
      }
    }).catch((err) => {
      console.error(err);
      if (index < arr.length) {
        run(ajax(arr[index]));
      }
    });
  }
}

很明顯就有個(gè)弊端，使用promise遞歸執(zhí)行異步操作的時(shí)候，處理數(shù)據(jù)的邏輯需要放在遞歸函數(shù)里，就沒有Generator函數(shù)舒服了，但是有什么辦法呢，小程序又不支持Generator函數(shù)，又不想引入墊片，就這樣做啦。