JS実現要求スケジューラ

11122 ワード
js。 要求 スケジューラ
前書き：JSは天然に並行要求をサポートしていますが、同時に目標サーバの圧力が大きすぎるという問題がありますので、本論文では「スケジューラを要求する」というものを導入して、合併度を制御しています。
TLDR;「抽象と多重」セクションに直接ジャンプします。
相互に依存しないリソースのいくつかを取得するために、通常は性能からPromise.all(arrayOfPromises)を使用して同時に実行することができる。例えば、私達は100個のアプリケーションのidを持っています。需要は全てのアプリケーションを集めるPVです。私達は通常こう書きます。

const ids = [1001, 1002, 1003, 1004, 1005];
const urlPrefix = 'http://opensearch.example.com/api/apps';

// fetch      HTTP   ，   Promise
const appPromises = ids.map(id => `${urlPrefix}/${id}`).map(fetch);

Promise.all(appPromises)
 //    reduce    
 .then(apps => apps.reduce((initial, current) => initial + current.pv, 0))
 .catch((error) => console.log(error));
上のコードは応用個数が多くない場合、正常に動作します。数が千何万に達する時、合併数をサポートするのはあまり良くないシステムです。あなたの「圧力測定」は第三放サーバーを保留します。しばらく要求に応じられません。

<html>
<head><title>502 Bad Gateway</title></head>
<body bgcolor="white">
<center><h1>502 Bad Gateway</h1></center>
<hr><center>nginx/1.10.1</center>
</body>
</html>
どう解決しますか？
一つの自然な考えは、こんなに多くの同時要求を支持しない以上、ブロックはいくつかの大きな塊に分割され、各ブロックはchunk、chunk内部の要求は依然として併発されているが、ブロックのサイズ（chunkSize）はシステムサポートの最大合併数以内に制限されている。前のchunkは、後のchunkを終了してから実行することができます。つまり、chunk内部の要求は同時に行われますが、chunk間はシリアルです。考え方は簡単ですが、書いてみると難しいです。まとめて3つの操作を行います。ブロック、シリアル、集約
Promiseをシリアルで実行するには難点がありますが、Promiseはパラレル機能のみを提供しています。シリアル機能は提供されていません。私たちは簡単な三つの要求から、どのように実現するかを見て、出発式で問題を解決します。

// task1, task2, task3       Promise      ，         
const task1 = () => new Promise((resolve) => {
 setTimeout(() => {
 resolve(1);
 console.log('task1 executed');
 }, 1000);
});

const task2 = () => new Promise((resolve) => {
 setTimeout(() => {
 resolve(2);
 console.log('task2 executed');
 }, 1000);
});

const task3 = () => new Promise((resolve) => {
 setTimeout(() => {
 resolve(3);
 console.log('task3 executed');
 }, 1000);
});

//     
let result = 0;

const resultPromise = [task1, task2, task3].reduce((current, next) => 	 
 current.then((number) => {
 console.log('resolved with number', number); // task2, task3   Promise       resolve
 result += number;

 return next();
 }),
 
 Promise.resolve(0)) //      

 .then(function(last) {
 console.log('The last promise resolved with number', last); // task3   Promise      resolve

 result += last;

 console.log('all executed with result', result);

 return Promise.resolve(result);
 });
運転結果は図1の通りです。

コード解析：私達が欲しい効果は、直感的に展示されているのはPromise.allです。上記のコードは、fn1().then(() => fn2()).then(() => fn3())のセットを順次実行させることができる鍵となる。Promiseのこの「エンジン」は、reduceの工場関数の実行を一歩進めている。
難点が解決しました。最終コードを見てみます。

/**
 *    HTTP   
 * @param {String} url 
 * @return {Promise}
 */
function fetch(url) {
 console.log(`Fetching ${url}`);
 return new Promise((resolve) => {
 setTimeout(() => resolve({ pv: Number(url.match(/\d+$/)) }), 2000);
 });
}

const urlPrefix = 'http://opensearch.example.com/api/apps';

const aggregator = {
 /**
 *     ，      
 * 
 * @return {Promise}
 */
 start() {
 return this.fetchAppIds()
 .then(ids => this.fetchAppsSerially(ids, 2))
 .then(apps => this.sumPv(apps))
 .catch(error => console.error(error));
 },
 
 /**
 *         ID
 *
 * @private
 * 
 * @return {Promise}
 */
 fetchAppIds() {
 return Promise.resolve([1001, 1002, 1003, 1004, 1005]);
 },

 promiseFactory(ids) {
 return () => Promise.all(ids.map(id => `${urlPrefix}/${id}`).map(fetch));
 },
 
 /**
 *          
 * 
 *        `concurrency`    ，     chunk
 *     `chunk`           ，          
 *
 * @private
 *
 * @param {[Number]} ids
 * @param {Number} concurrency          
 * @return {[Object]}         
 */
 fetchAppsSerially(ids, concurrency = 100) {
 //   
 let chunkOfIds = ids.splice(0, concurrency);
 const tasks = [];
 
 while (chunkOfIds.length !== 0) {
 tasks.push(this.promiseFactory(chunkOfIds));
 chunkOfIds = ids.splice(0, concurrency);
 }
 
 //       
 const result = [];
 return tasks.reduce((current, next) => current.then((chunkOfApps) => {
 console.info('Chunk of', chunkOfApps.length, 'concurrency requests has finished with result:', chunkOfApps, '

');
 result.push(...chunkOfApps); //     
 return next();
 }), Promise.resolve([]))
 .then((lastchunkOfApps) => {
 console.info('Chunk of', lastchunkOfApps.length, 'concurrency requests has finished with result:', lastchunkOfApps, '

');

 result.push(...lastchunkOfApps); //      
 console.info('All chunks has been executed with result', result);
 return result;
 });
 },
 
 /**
 *         PV
 * 
 * @private
 * 
 * @param {[]} apps 
 * @return {[type]} [description]
 */
 sumPv(apps) {
 const initial = { pv: 0 };

 return apps.reduce((accumulator, app) => ({ pv: accumulator.pv + app.pv }), initial);
 }
};

//     
aggregator.start().then(console.log);
運転結果は図2の通りです。

抽象と多重化
目的は共通性を備えているので、以下からは多重化のために抽象的に一つのモードになります。
シリアル
まずhttp getを模擬してお願いします。

/**
 * mocked http get.
 * @param {string} url
 * @returns {{ url: string; delay: number; }}
 */
function httpGet(url) {
 const delay = Math.random() * 1000;

 console.info('GET', url);

 return new Promise((resolve) => {
 setTimeout(() => {
 resolve({
 url,
 delay,
 at: Date.now()
 })
 }, delay);
 })
}
一連の要求を実行します。

const ids = [1, 2, 3, 4, 5, 6, 7];

//       ，    delay    『  』  ，            ，        
const httpGetters = ids.map(id => 
 () => httpGet(`https://jsonplaceholder.typicode.com/posts/${id}`)
);

//      
const tasks = await httpGetters.reduce((acc, cur) => {
 return acc.then(cur);
 
 //   ，   
 // return acc.then(() => cur());
}, Promise.resolve());

tasks.then(() => {
 console.log('done');
});
注意コンソール出力を観察し、シリアルで以下の内容を出力します。

GET https://jsonplaceholder.typicode.com/posts/1
GET https://jsonplaceholder.typicode.com/posts/2
GET https://jsonplaceholder.typicode.com/posts/3
GET https://jsonplaceholder.typicode.com/posts/4
GET https://jsonplaceholder.typicode.com/posts/5
GET https://jsonplaceholder.typicode.com/posts/6
GET https://jsonplaceholder.typicode.com/posts/7
セグメントのシリアル
ポイントが来ました。本明細書の要求スケジューラ実装

/**
 * Schedule promises.
 * @param {Array<(...arg: any[]) => Promise<any>>} factories 
 * @param {number} concurrency 
 */
function schedulePromises(factories, concurrency) {
 /**
 * chunk
 * @param {any[]} arr 
 * @param {number} size 
 * @returns {Array<any[]>}
 */
 const chunk = (arr, size = 1) => {
 return arr.reduce((acc, cur, idx) => {
 const modulo = idx % size;

 if (modulo === 0) {
 acc[acc.length] = [cur];
 } else {
 acc[acc.length - 1].push(cur);
 }

 return acc;
 }, [])
 };

 const chunks = chunk(factories, concurrency);

 let resps = [];

 return chunks.reduce(
 (acc, cur) => {
 return acc
 .then(() => {
  console.log('---');
  return Promise.all(cur.map(f => f()));
 })
 .then((intermediateResponses) => {
  resps.push(...intermediateResponses);

  return resps;
 })
 },

 Promise.resolve()
 );
}
テストでは、スケジューラを実行します。

//     ，    
schedulePromises(httpGetters, 3).then((resps) => {
 console.log('resps:', resps);
});
コンソール出力:

---
GET https://jsonplaceholder.typicode.com/posts/1
GET https://jsonplaceholder.typicode.com/posts/2
GET https://jsonplaceholder.typicode.com/posts/3
---
GET https://jsonplaceholder.typicode.com/posts/4
GET https://jsonplaceholder.typicode.com/posts/5
GET https://jsonplaceholder.typicode.com/posts/6
---
GET https://jsonplaceholder.typicode.com/posts/7

resps: [
 {
 "url": "https://jsonplaceholder.typicode.com/posts/1",
 "delay": 733.010980640727,
 "at": 1615131322163
 },
 {
 "url": "https://jsonplaceholder.typicode.com/posts/2",
 "delay": 594.5056229848931,
 "at": 1615131322024
 },
 {
 "url": "https://jsonplaceholder.typicode.com/posts/3",
 "delay": 738.8230109146299,
 "at": 1615131322168
 },
 {
 "url": "https://jsonplaceholder.typicode.com/posts/4",
 "delay": 525.4604386109747,
 "at": 1615131322698
 },
 {
 "url": "https://jsonplaceholder.typicode.com/posts/5",
 "delay": 29.086379722201183,
 "at": 1615131322201
 },
 {
 "url": "https://jsonplaceholder.typicode.com/posts/6",
 "delay": 592.2345027398272,
 "at": 1615131322765
 },
 {
 "url": "https://jsonplaceholder.typicode.com/posts/7",
 "delay": 513.0684467560949,
 "at": 1615131323284
 }
]
締め括りをつける
  • 合併要求の数が大きすぎると、ブロックシリアルを考慮して、ブロック内の同時要求が考えられます。
  • 問題は複雑そうに見えるが、先に簡略化してから、一歩一歩進んで肝心な点を導き、最後に抽象的に解決策を見つけることができる。
  • 本明細書の真髄は、Promiseをシリアル推進エンジンとして使用することにあるので、私たちが日常的に開発しているパズルの解読に新たなアイデアを提供することができ、reduceは前編あなたはついにReduceを使いました。を参照してください。🎉。
    • 以上はJS実現要求スケジューラの詳細です。JS要求スケジューラに関する資料は他の関連記事に注目してください。
    AndroidカスタムToastの表示時間を短縮するコードの例
    jQueryの中でajaxに関する知識点のまとめ