网络请求并发限制的管理类

1// 实现网络请求并发限制的管理类 NetManager(concurrency)，
2// 构造函数传入一个number，是并发的限制数，
3// 提供 request(url, data) => Promise<res> 方法
4// Const obj = new NetManager(5)
5// obj.request(“/xxx/sss”, {a: 1})
6
7// net-manager.js
8class NetManager {
9  constructor(number) {
10    if (!(typeof number === 'number' && !Number.isNaN(number))) {
11      console.error(`NetManager params typeof number === '${typeof number}', value: ${number}`);
12    }
13
14    this.number = number;
15    this.queues = [];
16    this.caches = [];
17  }
18
19  trigger = () => {
20    const hits = this.queues.filter((i) => i.isFetch === false);
21    hits.forEach((item) => {
22      item.isFetch = true;
23
24      item
25        .task()
26        .then(item.resolve)
27        .catch(item.reject)
28        .finally(() => {
29          const deleteIndex = this.queues.findIndex((del) => del.key === item.key);
30
31          if (deleteIndex !== -1) {
32            this.queues.splice(deleteIndex, 1);
33          }
34
35          if (this.caches.length > 0) {
36            this.queues.push(this.caches.shift());
37            this.trigger();
38          }
39        });
40    });
41  };
42
43  request = (...reset) => {
44    return new Promise((resolve, reject) => {
45      // 绑定一个函数并传参
46      const task = window.fetch.bind(null, ...reset);
47
48      // 生成一个key值，用于删除队列任务
49      const key = Math.random();
50
51      const newItem = {key, isFetch: false, task, resolve, reject};
52      if (this.queues.length >= this.number || this.caches.length > 0) {
53        this.caches.push(newItem);
54      } else {
55        this.queues.push(newItem);
56        this.trigger();
57      }
58    });
59  };
60}
61const JSON_PLACEHOLDER = 'https://jsonplaceholder.typicode.com/todos/';
62
63const obj = new NetManager(2);
64
65for (let i = 1; i <= 10; i++) {
66  obj
67    .request(`${JSON_PLACEHOLDER}${i}`, {credentials: 'include'})
68    .then((res) => res.json())
69    .then((result) => {
70      console.log('result', result);
71    })
72    .catch((err) => {
73      console.error(err);
74    });
75}
76
77