摘要：故事開(kāi)始了，小程序圖片合成真機(jī)測(cè)試時(shí)，會(huì)報(bào)錯(cuò)。所以只能將異步并發(fā)改為同步阻塞式渲染。

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

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

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

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

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

需要去溫習(xí)下async和await了

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

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

? ? ?statements

}

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

await是什么？

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

說(shuō)得形象些，async許下承諾，await接收承諾。
async許下了什么，許下一個(gè)承諾函數(shù)，也就是一個(gè)Promise。
await在等待什么，它在等待一個(gè)承諾，也就是一個(gè)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對(duì)象執(zhí)行中
與此同時(shí)，await做好了接收Promise對(duì)象的準(zhǔn)備
2秒后，await接收到Promise，賦值給result
打印"resolved"

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

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

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.
懵逼，看完并不會(huì)用。
但是經(jīng)過(guò)一番折騰，終于會(huì)用了，和Array.prototype.map有點(diǎn)類(lèi)似的，只不過(guò)Promise.map傳入的callback是一個(gè)AsyncFunction，也就是返回一個(gè)Promise的函數(shù)。
做到了并發(fā)數(shù)的控制，但是控制并發(fā)數(shù)以后圖片數(shù)據(jù)還是獲取不完整，10個(gè)并發(fā)，9個(gè)并發(fā)，5個(gè)并發(fā)，2個(gè)并發(fā)，都試過(guò)了，都是不行。必須改異步為同步，也就是限制每次只能請(qǐng)求1個(gè)，也就是并發(fā)數(shù)設(shè)置為1即可，但是用戶(hù)體驗(yàn)上非常不好，用戶(hù)只能看到一張一張圖片，假設(shè)有60張，需要一張一張去請(qǐng)求，最后再合成一張完整的圖片。
但是為了保證所有圖片都能下載下來(lái)，能夠正常顯示所有的圖片，這是目前唯一的辦法。
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"
      })
    }
  })
});
所有這個(gè)問(wèn)題最后還是使用bluebird的promise.map方法控制并發(fā)請(qǐng)求數(shù)實(shí)現(xiàn)的，也就是 { concurrency: 1}這里，但是沒(méi)有達(dá)到預(yù)期小于10個(gè)并發(fā)的處理預(yù)期，因?yàn)橹灰遣l(fā)，都會(huì)造成數(shù)據(jù)丟失。
所以只能將異步并發(fā)改為同步阻塞式渲染。
這個(gè)問(wèn)題的出現(xiàn)與我們圖片合成功能的設(shè)計(jì)架構(gòu)有很大的問(wèn)題，其實(shí)最理想的情況是，服務(wù)端直接返回一張完整的大圖片，前端僅需一次網(wǎng)絡(luò)請(qǐng)求即可，不存在同步異步這種令人頭疼的問(wèn)題。
雖然最后通過(guò)異步并發(fā)渲染轉(zhuǎn)換為同步阻塞渲染，獲取到了全部的圖片資源，但是這并不是好的解決方案，所以這篇文章的主要是講了一個(gè)異步并發(fā)數(shù)量控制的方法，也穿插著加入了一些異步并發(fā)渲染與同步阻塞渲染對(duì)比的內(nèi)容，還要就是我對(duì)圖片合成這個(gè)功能設(shè)計(jì)架構(gòu)上的一些想法。
That"s it !