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

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

[
  "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",
  ...
]

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

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

// 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) 

因為請求是異步的，我們也無法確定每個請求花費的時間，所以只能在回調里處理。現(xiàn)在我們有了Promise，async-await，支持同步的寫法，那可以怎么寫呢？

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

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

首先先看下怎么并行請求和請求結束確定

// 模擬請求
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

上面的輸出可以看出，請求是并行的，但是無法確定什么結束

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

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

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

? 使用Promise.all

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

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

我們不能保證所有的請求都是正常的，接下來看看當有請求出錯時怎么處理，假設200的請求出錯

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方法捕獲錯誤，最近新增的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

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

接下來我們改造下模擬請求，在請求出錯后就catch錯誤

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中拿到全部的結果了，如果要用for循環(huán)的話也是可以的

(async () => {
  const temp = []
  // 這個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")
})()
// 輸出與上面一致

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

好了，以上就是全部內容，你有更好的寫法嗎？