摘要：最近在寫一個(gè)程序，功能是下載頁(yè)面上的資源，首先拿到頁(yè)面資源鏈接列表，如要求是資源并行下載，所有資源下載結(jié)束后通知，收集錯(cuò)誤的下載鏈接。如果把上面模擬請(qǐng)求的注釋去掉，還會(huì)發(fā)現(xiàn)是在結(jié)束后就執(zhí)行了，而后面的請(qǐng)求還未結(jié)束。

最近在寫一個(gè)Node.js程序，功能是下載頁(yè)面上的資源，首先拿到頁(yè)面資源鏈接列表，如：

[
  "https://xxx.com/img/logo.jpg",
  "https://xxx.com/img/bg.jpg",
  "https://xxx.com/css/main.css",
  "https://xxx.com/css/animate.css",
  "https://xxx.com/js/jquery.js",
  "https://xxx.com/js/form.js",
  ...
]

要求是資源并行下載，所有資源下載結(jié)束后通知，收集錯(cuò)誤的下載鏈接。

如果是傳統(tǒng)做法是遍歷數(shù)組發(fā)送請(qǐng)求，聲明一個(gè)變量記錄請(qǐng)求數(shù)，不管成功或失敗，結(jié)束后都給這個(gè)變量+1，并且調(diào)用一個(gè)函數(shù)，這個(gè)函數(shù)判斷當(dāng)前變量是否等于數(shù)組長(zhǎng)度，相等則表示所有請(qǐng)求已經(jīng)完成。

// pseudo code
var count = 0
var errs = []
var data = [...]
function request(url) {
  ajax({url: url})
    .success(function () {
       count++
       callback()
    })
    .fail(function () {
      count++
      errs.push(...)
      callback()
    })
}

function callback() {
  if (count === data.length) {
    console.log("done!")
  }
}

data.forEach(request) 

因?yàn)檎?qǐng)求是異步的，我們也無(wú)法確定每個(gè)請(qǐng)求花費(fèi)的時(shí)間，所以只能在回調(diào)里處理?，F(xiàn)在我們有了Promise，async-await，支持同步的寫法，那可以怎么寫呢？

我們用setTimeout來(lái)模擬請(qǐng)求，數(shù)據(jù)data = [500, 400, 300, 200, 100]既是每個(gè)請(qǐng)求返回的數(shù)據(jù)也是每個(gè)請(qǐng)求所需的時(shí)間。

如果是繼發(fā)請(qǐng)求（一個(gè)請(qǐng)求結(jié)束后再請(qǐng)求后一個(gè)），那么應(yīng)該是按順序打印，理論上所有請(qǐng)求的總時(shí)間等于每個(gè)請(qǐng)求所花時(shí)間之和，約等于1500ms；如果是并發(fā)請(qǐng)求（假設(shè)請(qǐng)求數(shù)不會(huì)太多，不超過(guò)限制），順序是按時(shí)間從小到大打印，理論上所有請(qǐng)求的總時(shí)間等于最長(zhǎng)的那個(gè)時(shí)間，約等于500ms。

首先先看下怎么并行請(qǐng)求和請(qǐng)求結(jié)束確定

// 模擬請(qǐng)求
function request(param) {
  return new Promise(resolve => {
    setTimeout(() => {
       console.log(param)
       resolve()
    }, param)
  })
}
const items = [500, 400, 300, 200, 100]

? 直接for循環(huán)

(() => {
  for (let item of items) {
    request(item)
  }
  console.log("end")
})()
// 輸出：end, 100, 200, 300, 400, 500

上面的輸出可以看出，請(qǐng)求是并行的，但是無(wú)法確定什么結(jié)束

? for循環(huán)，使用async-await

(async () => {
  for (let item of items) {
    await request(item)
  }
  console.log("end")
})()
// 輸出：500, 400, 300, 200, 100, end

上面的代碼可以看出，雖然確定了結(jié)束，但請(qǐng)求是繼發(fā)的

? 使用Promise.all

(() => {
  Promise.all(items.map(request)).then(res => {
    console.log("end")
  })
})()
// 輸出：100, 200, 300, 400, 500, end

上面的代碼可以看出，請(qǐng)求是并發(fā)的，并且在所有請(qǐng)求結(jié)束后打印end，滿足條件

我們不能保證所有的請(qǐng)求都是正常的，接下來(lái)看看當(dāng)有請(qǐng)求出錯(cuò)時(shí)怎么處理，假設(shè)200的請(qǐng)求出錯(cuò)

function request(param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (param === 200) {
        // console.log(param, " failed")
        return reject({
          status: "error",
          data: param
        })
      }
      // console.log(param, " success")
      resolve({
        status: "success",
        data: param
      })
    }, param)
  })
}
const items = [500, 400, 300, 200, 100]

Promise有catch方法捕獲錯(cuò)誤，最近新增的finally方法能在最后執(zhí)行

(() => {
  Promise.all(items.map(request))
    .then(res => {
      console.log(res)
    })
    .catch (err => {
      console.log(err)
    })
    .finally(res => {
      console.log("end", res)
    })
})()
// 輸出 {status: "error", data: 200}, end, undefined

上面的輸出可以看出，如果有錯(cuò)誤，則不會(huì)進(jìn)入then，而是進(jìn)入catch，然后進(jìn)入finally，但是finally不接受參數(shù)，只告訴你結(jié)束了。如果把上面模擬請(qǐng)求的console.log(...)注釋去掉，還會(huì)發(fā)現(xiàn)finally是在catch結(jié)束后就執(zhí)行了，而200后面的請(qǐng)求還未結(jié)束。

接下來(lái)我們改造下模擬請(qǐng)求，在請(qǐng)求出錯(cuò)后就catch錯(cuò)誤

function request(param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (param === 200) {
        // console.log(param, " failed")
        return reject({
          status: "error",
          data: param
        })
      }
      // console.log(param, " success")
      resolve({
        status: "success",
        data: param
      })
    }, param)
  }).catch(err => err)
}

(() => {
  Promise.all(items.map(request))
    .then(res => {
      console.log(res, "end")
    })
})()
// 輸出 [{…}, {…}, {…}, {stauts: "error", data: 200}, {…}], end

這樣就可以在then中拿到全部的結(jié)果了，如果要用for循環(huán)的話也是可以的

(async () => {
  const temp = []
  // 這個(gè)for循環(huán)的作用和上面的map類似
  for (let item of items) {
    temp.push(request(item))
  }

  const result = []
  for (let t of temp) {
    result.push(await t)
  }
  console.log(result, "end")
})()
// 輸出與上面一致

第一個(gè)for循環(huán)保證并發(fā)請(qǐng)求，保存了Promise，第二個(gè)循環(huán)加入await保證按順序執(zhí)行。

好了，以上就是全部?jī)?nèi)容，你有更好的寫法嗎？