-
Notifications
You must be signed in to change notification settings - Fork 0
/
fetch.html
147 lines (120 loc) · 3.73 KB
/
fetch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function handleFetchQueue(urls, max, callback) {
const urlCount = urls.length;
const requestsQueue = [];
const results = [];
let i = 0;
const handleRequest = (url) => {
// 请求返回的结果
const req = fetch(url).then(res => {
// 下面的end request谁这里的res就是谁
// requestsQueue 已经被推满了4个
// results 不断的增加
const len = results.push(res);
console.log({
res,
requestsQueue,
results,
i
})
// i + 1 < urlCount 最后的时候i不增加了，但是len 还是会增加
// 不加这个条件会导致再发送几个请求，但是结果没什么影响
if (len < urlCount && i + 1 < urlCount) {
requestsQueue.shift();
handleRequest(urls[++i])
} else if (len === urlCount) {
'function' === typeof callback && callback(results)
}
}).catch(e => {
results.push(e)
});
// console.log(req)
// 连发四个
if (requestsQueue.push(req) < max) {
console.log({ i })
handleRequest(urls[++i])
}
};
handleRequest(urls[i])
}
const urls = Array.from({length: 10}, (v, k) => k);
const fetch = function (idx) {
return new Promise(resolve => {
console.log(`start request ${idx}`);
const timeout = parseInt(Math.random() * 1e4);
setTimeout(() => {
console.log(`end request ${idx}`);
resolve(idx)
}, timeout)
})
};
const max = 4;
const callback = (results) => {
console.log('最终结果', results);
};
handleFetchQueue(urls, max, callback);
//
</script>
<script>
// function handleFetchQueue(urls, max, callback) {
// const urlCount = urls.length;
// const requestsQueue = [];
// const results = [];
// let i = 0;
// const handleRequest = url => {
// // req部分
// const req = fetchFunc(url).then(res => {
// results.push(res);
// console.log(results)
// }).catch(e => {
// // 报错不用关注
// results.push(e);
// }).finally(() => {
// const len = results.length;
// // console.log(len)
// if (len < urlCount) {
// // 完成请求就出队
// requestsQueue.shift();
// handleRequest(urls[++i]);
// } else if (len === urlCount) {
// "function" === typeof callback && callback(results);
// }
// });
// // console.log('req:', req)
// requestsQueue.push(req);
// // console.log('requestsQueue:', requestsQueue)
// // 只要满足就继续请求
// if (requestsQueue.length <= max) {
// console.log({i})
// handleRequest(urls[++i]);
// }
// };
// // console.log(i)
// handleRequest(urls[i]);
// }
// const urls = Array.from({ length: 10 }, (v, k) => k);
// const fetchFunc = function (idx) {
// return new Promise(resolve => {
// // console.log(`start request ${idx}`);
// const timeout = parseInt(Math.random() * 1e4);
// setTimeout(() => {
// resolve(idx)
// }, timeout)
// })
// };
// const max = 4;
// const callback = (results) => {
// console.log('最终结果', results);
// };
// handleFetchQueue(urls, max, callback);
</script>
</body>
</html>