摘要：故事開始了，小程序圖片合成真機測試時，會報錯。所以只能將異步并發(fā)改為同步阻塞式渲染。

故事開始了，小程序canvas圖片合成 真機測試時，會報錯：getImageInfo failed 。
也就是說，我這邊異步請求50張圖片，每張圖片都是通過getImageInfo下載到本地并且繪制到canvas畫布上，但是在處理的過程中，getImageInfo會出現(xiàn)獲取本地圖片錯誤的情況，也就是說請求50張，最后繪制出來的可能只有45張或者40張，非常明顯的數(shù)據(jù)丟失，要比數(shù)據(jù)包丟包嚴重N倍。

經(jīng)過一系列排查后，發(fā)現(xiàn)可能原因有2個：
1.圖片請求的域名必須是小程序經(jīng)過小程序驗證的（大佬們通過換域名跳轉(zhuǎn)解決了這個風險）
2.小程序的請求并發(fā)數(shù)超過小程序的最大并發(fā)限制， request、uploadFile、downloadFile 的最大并發(fā)限制是 10 個

開發(fā)者經(jīng)驗：
"代碼問題，小程序同時只能發(fā)送10個網(wǎng)絡(luò)請求，超過后就會報錯。圖片信息獲取也占用這10個網(wǎng)絡(luò)請求。要把圖片信息獲取序列化。控制在同一個時間內(nèi)段內(nèi)不超10個請求，我是做了隊列處理，一次只發(fā)送一個請求。完成后在走下一個"

CNODE社區(qū)經(jīng)驗
原生promise、async怎么實現(xiàn)控制并發(fā)數(shù)量
1. bluebird可以做到控制并發(fā)數(shù)量。
2.用?for?遍歷，然后一次拿2個，或者多個出來?再?Promise.all?之后?再?await
3.promise.map包
const promise = pmap(arr, async item => {
? ? ?? //
}, 10) // 最后是 concurrency
4. 不想用庫，那就把 https://github.com/sindresorh...?對應(yīng)的方法，CTRL+C?過來唄

bluebird并發(fā)控制數(shù)量...并沒有接觸過，但是感覺底層都是async和await。

需要去溫習下async和await了

async是什么？
async函數(shù)聲明定義了一個異步函數(shù)，這個函數(shù)返回一個AsyncFunction對象。

async function name([param,[param[,...param]]]){

? ? ?statements

}

函數(shù)都有return的東西，async return的是什么，它返回的是AsyncFunction對象，表示執(zhí)行包含在函數(shù)中的代碼的異步函數(shù)，與new一個Object或者自己寫的類一樣，new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody)

await是什么？

await操作符被用來等待一個Promise對象。它僅僅在async函數(shù)中使用。
[rv] = await expression;

說得形象些，async許下承諾，await接收承諾。
async許下了什么，許下一個承諾函數(shù)，也就是一個Promise。
await在等待什么，它在等待一個承諾，也就是一個Promise。

function resolveAfter2Seconds() {
? return new Promise(resolve => {
?   setTimeout(() => {
?     resolve("resolved");
?   }, 2000);
? });
}
async function asyncCall() {
? console.log("calling");
? var result = await resolveAfter2Seconds();
? console.log(result);
? // expected output: "resolved"
}
asyncCall();

?=>"calling"http://瞬間打印
?=>"resolved"http://兩秒后打印

分下下上面代碼的工作原理：

asyncCall()執(zhí)行
打印"calling"
resolveAfter2Seconds() 執(zhí)行，Promise對象執(zhí)行中
與此同時，await做好了接收Promise對象的準備
2秒后，await接收到Promise，賦值給result
打印"resolved"

溫習結(jié)束，開始嘗試異步控制的辦法。

網(wǎng)友的代碼只言片語，實在看不懂，到官網(wǎng)Promise.map來看下。

Promise.map(
`? ? Iterable|Promise>?input,
? ? function(any?item,?int?index,?int?length)?mapper,
? ? [Object?{concurrency:?int=Infinity}?options]`
)?->?Promise
`var?promises?=?[];
for?(var?i?=?0;?i?
Map Option: concurrency
You may optionally specify a concurrency limit:
...map(..., {concurrency: 3});
The concurrency limit applies to Promises returned by the mapper function and it basically limits the number of Promises created. For example, if concurrency is 3 and the mapper callback has been called enough so that there are three returned Promises currently pending, no further callbacks are called until one of the pending Promises resolves. So the mapper function will be called three times and it will be called again only after at least one of the Promises resolves.
懵逼，看完并不會用。
但是經(jīng)過一番折騰，終于會用了，和Array.prototype.map有點類似的，只不過Promise.map傳入的callback是一個AsyncFunction，也就是返回一個Promise的函數(shù)。
做到了并發(fā)數(shù)的控制，但是控制并發(fā)數(shù)以后圖片數(shù)據(jù)還是獲取不完整，10個并發(fā)，9個并發(fā)，5個并發(fā)，2個并發(fā)，都試過了，都是不行。必須改異步為同步，也就是限制每次只能請求1個，也就是并發(fā)數(shù)設(shè)置為1即可，但是用戶體驗上非常不好，用戶只能看到一張一張圖片，假設(shè)有60張，需要一張一張去請求，最后再合成一張完整的圖片。
但是為了保證所有圖片都能下載下來，能夠正常顯示所有的圖片，這是目前唯一的辦法。
Promise.map(photoData, function (photo) {
  return getImageInfoPromisified({
    src: photo.url
  }).then(function (res) {
    imagesArr.push(res.path);
    picx = (photo.left / 2) * ratio;
    picy = ((photo.top - 360) / 2) * ratio;
    picwidth = ((photo.width / 2) - 4) * ratio;
    picheight = ((photo.height / 2) - 4) * ratio;
    ctx.drawImage(res.path, picx, picy, picwidth, picheight);
    ctx.draw(true);

  }).catch(function () {
    console.error("get location failed")
  });
}, { concurrency: 1}).then(function () {
  wx.canvasToTempFilePath({
    canvasId: "pic",
    success: function (res) {
      console.log(res.tempFilePath)
      that.setData({
        onlineImage: res.tempFilePath,
        canvasDisplay: "none"
      })
    }
  })
});
所有這個問題最后還是使用bluebird的promise.map方法控制并發(fā)請求數(shù)實現(xiàn)的，也就是 { concurrency: 1}這里，但是沒有達到預(yù)期小于10個并發(fā)的處理預(yù)期，因為只要是并發(fā)，都會造成數(shù)據(jù)丟失。
所以只能將異步并發(fā)改為同步阻塞式渲染。
這個問題的出現(xiàn)與我們圖片合成功能的設(shè)計架構(gòu)有很大的問題，其實最理想的情況是，服務(wù)端直接返回一張完整的大圖片，前端僅需一次網(wǎng)絡(luò)請求即可，不存在同步異步這種令人頭疼的問題。
雖然最后通過異步并發(fā)渲染轉(zhuǎn)換為同步阻塞渲染，獲取到了全部的圖片資源，但是這并不是好的解決方案，所以這篇文章的主要是講了一個異步并發(fā)數(shù)量控制的方法，也穿插著加入了一些異步并發(fā)渲染與同步阻塞渲染對比的內(nèi)容，還要就是我對圖片合成這個功能設(shè)計架構(gòu)上的一些想法。
That"s it !