JavaScript非同步操作中序列和並行
阿新 • • 發佈:2021-11-20
目錄
- 1、前言
- 2、es5方式
- 3、非同步函式序列執行
- 4、非同步函式並行執行
- 5、非同步函式序列執行和並行執行結合
- 6、es6方式
- 7、async 和await 結合promise all
1、前言
本文寫一下中
es5
和es6
針對非同步函式,序列執行和並行執行的方案。已經序列和並行結合使用的例子。
2、es5方式
在es6出來之前,社群nodejs
中針對回撥地獄,已經有了promise
方案。假如多個非同步函式,執行循序怎麼安排,如何才能更快的執行完所有非同步函式,再執行下一步呢?這裡就出現了js的序列執行和並行執行問題。
3、非同步函式序列執行
var items = [ 1,2,3,4,5,6 ]; var results = []; function async(arg,callback) { console.log('引數為 ' + arg +',1秒後返回結果'); setTimeout(function () { callback(arg * 2); },1000); } function final(value) { console.log('完成: ',value); } function series(item) { if(item) { async( item,function(result) { results.push(result); return series(items.shift());// 遞迴執行完所有的資料 }); } else { return final(results[results.length - 1]); } } series(items.shift());
4、非同步函式並行執行
上面函式是一個一個執行的,上一個執行結束再執行下一個,類似es6
(es5之後統稱es6)中 async 和await,那有沒有類似promise.all
這種,所有的並行執行的呢?
可以如下寫:
var items = [ 1,value); } items.forEach(function(item) {// 迴圈完成 async(item,function(result){ results.push(result); if(results.length === items.length) {// 判斷執行完畢的個數是否等於要執行函式的個數 final(results[results.length - 1]); } }) });
5、非同步函式序列執行和並行執行結合
假如並行執行很多條非同步(幾百條)資料,每個非同步資料中有很多的(https)請求資料,勢必造成tcp 連線數不足,或者堆積了無數呼叫棧導致記憶體溢位。所以並行執行不易太多資料,因此,出現了並行和序列結合的方式。
程式碼可以如下書寫:
var items = [ 1,6 ]; var results = []; var running = 0; var limit = 2; function async(arg,value); } function launcher() { while(running < limit && items.length > 0) { var item = items.shift(); async(item,function(result) { results.push(result); running--; if(items.length > 0) { launcher(); } else if(running == 0) { final(rsIsCymqesults); } }); running++; } } launcher();
6、es6方式
es6
天然自帶序列和並行的執行方式,例如序列可以用async
和await
(前文已經講解),並行可以用promise.all等等。那麼針對序列和並行結合,限制promise all
併發數量,社群也有一些方案,例如
tiny-async-pool、es6-promise-pool、p-limit
簡單封裝一個promise all
併發數限制解決方案函式
function PromiseLimit(funcArray,limit = 5) { // 併發執行5條資料
let i = 0;
const result = [];
const executing = [];
const queue = function() {
if (i === funcArray.length) return Promise.all(executing);
const p = funcArray[i++]();
result.push(p);
const e = p.then(() => executing.splice(executing.indexOf(e),1));
executing.push(e);
if (executing.length >= limit) {
return Promise.race(executing).then(
() => queue(),e => Promise.reject(e)
);
}
sIsCymq return Promise.resolve().then(() => queue());
};
return queue().then(() => Promise.all(result));
}
使用:
// 測試程式碼 const result = []; for (let index = 0; index < 10; index++) { result.push(function() { return new Promise((resolve,reject) => { console.log("開始" + index,new Date().toLocaleString()); setTimeout(() => { resolve(index); console.log("結束" + index,new Date().toLocaleString()); },parseInt(Math.random() * 10000)); }); }); } PromiseLimit(result).then(data => { console.log(data); });
修改測試程式碼,新增隨機失敗邏輯
// 修改測試程式碼 隨機失敗或者成功 const result = []; for (let index = 0; index < 10; index++) { result.push(function() { return new Promise((resolve,new Date().toLocaleString()); setTimeout(() => { if (Math.random() > 0.5) { resolve(index); } else { reject(index); } console.log("結束" + index,parseInt(Math.random() * 1000)); }); }); } PromiseLimit(result).客棧then( data => { console.log("成功",data); },data => { console.log("失敗",data); } );
7、async 和await 結合promise all
async function PromiseAll(promises,batchSize=10) { const result = []; while(promises.length > 0) { const data = await Promise.all(promises.splice(0,batchSize)); result.push(...data); } return result; }
這麼寫有2個問題:
- 1、在呼叫
Promise.all
前就已經建立好了promises
,實際上promise
已經執行了 - 2、你這個實現必須等前面
batchSize個promise resolve
,才能跑下一批的batchSiz程式設計客棧e
個,也就是promise all
全部成功才可以。
改進如下:
async function asyncPool(array,poolLimit,iteratorFn) { const ret = []; const executing = []; for (const item of array) { const p = Promise.resolve().then(() => iteratorFn(item,array)); ret.push(p); if (poolLimit <= array.length) { const e = p.then(() => executing.splice(executing.indexOf(e),1)); executing.push(e); if (executing.length >= poolLimit) { await Promise.race(executing); } } } return Promise.all(ret); }
使用:
const timeout = i => new Promise(resolve => setTimeout(() => resolve(i),i)); return asyncPool( [1000,5000,3000,2000],timeout).then(results => { ... });
到此這篇關於非同步操作中序列和並行的文章就介紹到這了,更多相關Script非同步操作序列和並行內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!