const preloadManger = (urls, maxCount = 5) => {
  let count = 0; // 計數(shù) -- 用于控制并發(fā)數(shù)
  const createTask = () => {
    if (count < maxCount) {
      const url = urls.pop(); // 從請求數(shù)組中取值
      if (url) {
        // 無論請求是否成功，都要執(zhí)行taskFinish
        loader(url).finally(taskFinish);
        // 添加下一個請求
        count++;
        createTask();
      }
    }
  };

  const taskFinish = () => {
    count--;
    createTask();
  };

  createTask();
};

// 進行異步請求
const loader = async (url) => {
  const res = await fetch(url).then(res=>res.json());
  console.log("res",res);
  return res
}

const urls = [];
for (let i = 1; i <= 20; i++) {
    urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}

preloadManger(urls, 5)

// 并發(fā)請求函數(shù)
const concurrencyRequest = (urls, maxNum) => {
    return new Promise((resolve) => {
        if (urls.length === 0) {
            resolve([]);
            return;
        }
        const results = [];
        let index = 0; // 下一個請求的下標
        let count = 0; // 當前請求完成的數(shù)量

        // 發(fā)送請求
        async function request() {
            if (index === urls.length) return;
            const i = index; // 保存序號，使result和urls相對應
            const url = urls[index];
            index++;
            console.log(url);
            try {
                const resp = await fetch(url);
                // resp 加入到results
                results[i] = resp;
            } catch (err) {
                // err 加入到results
                results[i] = err;
            } finally {
                count++;
                // 判斷是否所有的請求都已完成
                if (count === urls.length) {
                    console.log('完成了');
                    resolve(results);
                }
                request();
            }
        }

        // maxNum和urls.length取最小進行調(diào)用
        const times = Math.min(maxNum, urls.length);
        for(let i = 0; i < times; i++) {
            request();
        }
    })
}

const urls = [];
for (let i = 1; i <= 20; i++) {
    urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}
concurrencyRequest(urls, 5).then(res => {
    console.log(res);
})

import Queue from 'yocto-queue';
import {AsyncResource} from '#async_hooks';

export default function pLimit(concurrency) {
 // 判斷這個參數(shù)是否是一個大于0的整數(shù)，如果不是就拋出一個錯誤
 if (
  !((Number.isInteger(concurrency)
  || concurrency === Number.POSITIVE_INFINITY)
  && concurrency > 0)
 ) {
  throw new TypeError('Expected `concurrency` to be a number from 1 and up');
 }

 // 創(chuàng)建隊列 -- 用于存取請求
 const queue = new Queue();
 // 計數(shù)
 let activeCount = 0;

 // 用來處理并發(fā)數(shù)的函數(shù)
 const next = () => {
  activeCount--;

  if (queue.size > 0) {
   // queue.dequeue()可以理解為[].shift()，取出隊列中的第一個任務，由于確定里面是一個函數(shù)，所以直接執(zhí)行就可以了；
   queue.dequeue()();
  }
 };

 // run函數(shù)就是用來執(zhí)行異步并發(fā)任務
 const run = async (function_, resolve, arguments_) => {
  // activeCount加1，表示當前并發(fā)數(shù)加1
  activeCount++;

  // 執(zhí)行傳入的異步函數(shù)，將結果賦值給result，注意：現(xiàn)在的result是一個處在pending狀態(tài)的Promise
  const result = (async () => function_(...arguments_))();

  // resolve函數(shù)就是enqueue函數(shù)中返回的Promise的resolve函數(shù)
  resolve(result);

  // 等待result的狀態(tài)發(fā)生改變，這里使用了try...catch，因為result可能會出現(xiàn)異常，所以需要捕獲異常；
  try {
   await result;
  } catch {}

  next();
 };

 // 將run函數(shù)添加到請求隊列中
 const enqueue = (function_, resolve, arguments_) => {
  queue.enqueue(
   // 將run函數(shù)綁定到AsyncResource上，不需要立即執(zhí)行，對此添加了一個bind方法
   AsyncResource.bind(run.bind(undefined, function_, resolve, arguments_)),
  );

  // 立即執(zhí)行一個異步函數(shù)，等待下一個微任務（注意：因為activeCount是異步更新的，所以需要等待下一個微任務執(zhí)行才能獲取新的值）
  (async () => {
   // This function needs to wait until the next microtask before comparing
   // `activeCount` to `concurrency`, because `activeCount` is updated asynchronously
   // when the run function is dequeued and called. The comparison in the if-statement
   // needs to happen asynchronously as well to get an up-to-date value for `activeCount`.
   await Promise.resolve();

   // 判斷activeCount是否小于concurrency，并且隊列中有任務，如果滿足條件就會將隊列中的任務取出來執(zhí)行
   if (activeCount < concurrency && queue.size > 0) {
    // 注意：queue.dequeue()()執(zhí)行的是run函數(shù)
    queue.dequeue()();
   }
  })();
 };

 // 接收一個函數(shù)fn和參數(shù)args，然后返回一個Promise，執(zhí)行出隊操作
 const generator = (function_, ...arguments_) => new Promise(resolve => {
  enqueue(function_, resolve, arguments_);
 });

 // 向外暴露當前的并發(fā)數(shù)和隊列中的任務數(shù)，并且手動清空隊列
 Object.defineProperties(generator, {
  // 當前并發(fā)數(shù)
  activeCount: {
   get: () => activeCount,
  },
  // 隊列中的任務數(shù)
  pendingCount: {
   get: () => queue.size,
  },
  // 清空隊列
  clearQueue: {
   value() {
    queue.clear();
   },
  },
 });

 return generator;
}

class PLimit {
    constructor(concurrency) {
        this.concurrency = concurrency;
        this.activeCount = 0;
        this.queue = [];
        
        return (fn, ...args) => {
            return new Promise(resolve => {
               this.enqueue(fn, resolve, args);
            });
        }
    }
    
    enqueue(fn, resolve, args) {
        this.queue.push(this.run.bind(this, fn, resolve, args));

        (async () => {
            await Promise.resolve();
            if (this.activeCount < this.concurrency && this.queue.length > 0) {
                this.queue.shift()();
            }
        })();
    }
    
    async run(fn, resolve, args) {
        this.activeCount++;

        const result = (async () => fn(...args))();

        resolve(result);

        try {
            await result;
        } catch {
        }

        this.next();
    }
    
    next() {
        this.activeCount--;

        if (this.queue.length > 0) {
            this.queue.shift()();
        }
    }
}