怎么用 Promise 让所有 GM_xmlhttpRequest 完成再进行下一步操作？

ThisAV

https://www.xiurenji.net/XiuRen/5409.html

1. //获取图片生成
   
2.                     let currentPageID=location.href.match(/(\d+)(?:_\d+)?.html/)[1],
   
3.                         pageMax=$('.page>a:last').text()=='下页'?$('.page>a:last').prev().text():$('.page>a:last').text();
   
4.                     let ImgList=[];
   
5. 
   
6.                     async function getImgUrl(array){
   
7.                         const ret = [];
   
8.                         const executing = [];
   
9.                         return new Promise(async (resolve, reject) => {
   
10.                             try {
    
11.                                 for(let currentPage=0;currentPage<(+pageMax);currentPage++) {
    
12.                                         let PageID = currentPage==0 ? `/${currentPageID}.html` : `/${currentPageID}_${currentPage}.html`,
    
13.                                             PageUrl = location.pathname.replace(/\/[^/.]+\.html/i, PageID);
    
14. 
    
15.                                     await $.get(PageUrl, (res,s,e)=>{
    
16.                                         $('.content img', res).map(function(i, e){
    
17.                                             ImgList.push(this.src);
    
18.                                             //console.log(PageID, i, e, this.src)
    
19.                                         });
    
20.                                     })
    
21.                                 }
    
22.                             } catch(e){
    
23.                                 console.error(e);
    
24.                             } finally {
    
25.                                 Promise.all(ret);
    
26.                             }
    
27.                         })
    
28.                     }
    
29.                     getImgUrl();
    
30. 
    
31. 
    
32.         let padZero = (n) => (num) => {
    
33.             if (typeof num === 'number') num += '';
    
34.             return num.padStart(n, '0');
    
35.         }
    
36. 
    
37. 
    
38.     function requestUrlBlob(url) {
    
39.         return new Promise((resolve, reject) => {
    
40.             GM_xmlhttpRequest({
    
41.                 url: url,
    
42.                 method: 'get',
    
43.                 responseType : 'blob',
    
44.                 onload :  res => resolve(res.response),
    
45.                 onerror : e => reject(e)
    
46.             });
    
47.         })
    
48.     }
    
49. 
    
50.     async function downloadAndPackFile(zipPack, url, filename, extname) {
    
51.         if (!extname) {
    
52.             const urlExt = url.split('.').pop();
    
53.             extname = urlExt ? `.${urlExt}` : '';
    
54.         }
    
55. 
    
56.         console.log(`正在下载`, url, filename);
    
57.         await requestUrlBlob(url).then((blob) => {
    
58.             console.log(`下载完成`, url, blob, filename);
    
59.             zipPack.file(`${filename}${extname}`, blob);
    
60.         });
    
61.     }
    
62. 
    
63.     async function startDownload(ImgList, zipName) { // zipName = 压缩包名字
    
64.         const zipPack = new window.JSZip();
    
65.         const urlObjList = ImgList.map((url, idx) =>({url, filename: padZero(3)(idx),}));
    
66. 
    
67.         console.log('开始下载');
    
68.         await asyncPool(5, urlObjList, ({ url, filename }) => {
    
69.             downloadAndPackFile(zipPack, url, filename);
    
70.         });
    
71. 
    
72.         await zipPack.generateAsync({ type: 'blob' }, function(metadata) {
    
73.             let progress = metadata.percent / 100;
    
74.             console.log(metadata, progress);
    
75.         }).then(
    
76.             function (blob) {
    
77.                 // 1) generate the zip file
    
78.                 window.saveAs(blob, `${zipName}.zip`); // 2) trigger the download
    
79.             },
    
80.             function (err) {
    
81.                 console.error('[批量下载] ERR', err);
    
82.             }
    
83.         );
    
84.         console.log('资源下载完成，开始打包资源', zipName);
    
85.     }
    
86. 
    
87.     async function asyncPool(poolLimit, array, iteratorFn) { //通过任务池限制并发数量，任务池 poolLimit=任务上限，array=任务对象，iteratorFn=任务内容
    
88.         const ret = [];
    
89.         const executing = [];
    
90.         for (const item of array) {
    
91.             const task = Promise.resolve().then((y, n) => {
    
92.                 iteratorFn(item, array)
    
93.             }); //等待处理完成
    
94.             ret.push(task);
    
95. 
    
96.             console.log(task);
    
97.             if (poolLimit <= array.length) {
    
98.                 const e = task.then(() => executing.splice(executing.indexOf(e), 1));
    
99.                 executing.push(e);
    
100.                 if (executing.length >= poolLimit) {
     
101.                     await Promise.race(executing);
     
102.                 }
     
103.             }
     
104.         }
     
105.         return Promise.all(ret);
     
106.     }
     
107.         

复制代码

对 Promise 不太熟悉，如上面的地址

startDownload 函数里

asyncPool 负责下载图片和打包

zipPack.generateAsync 执行下载动作

但是 zipPack.generateAsync  没有等待 asyncPool 的 GM_xhr 完成就执行了下载动作，导致下载了一个空包
该怎么调整代码执行？

cxxjackie

ThisAV 发表于 2022-1-24 15:59
感谢大佬回帖，是我的描述有问题，现有的代码就是这个操作方法

startDownload 函数里

感觉你对async/await的理解有问题，虽然强行异步后返回值变成了Promise，但代码实际还是同步的，这个downloadAndPackFile函数问题很大，return GM_xhr肯定得不到想要的结果，应该自己用Promise封装后return这个Promise（参考我给的download函数），asyncPool做的事跟我的downloadAll函数类似。

ThisAV

PS: 因为图片地址会进行 301 跳转，fetch 会受到 cors 影响

李恒道

https://developer.mozilla.org/zh ... Objects/Promise/all
是想用promise.all函数么

李恒道

看了一下，Gm_xhr不可以用await哦
他没有返回promise
可以自己封装一个
https://bbs.tampermonkey.net.cn/thread-883-1-1.html

cxxjackie

给你写个简单示例：

1. function download(url) {
   
2.     return new Promise((resolve, reject) => {
   
3.         GM_xmlhttpRequest({
   
4.             url: url,
   
5.             method: 'get',
   
6.             responseType : 'blob',
   
7.             onload: res => resolve(res.response),
   
8.             onerror: e => reject(e)
   
9.         });
   
10.     });
    
11. }
    
12. function downloadAll(urlList) {
    
13.     const task = [];
    
14.     for (let url of urlList) {
    
15.         task.push(download(url));
    
16.     }
    
17.     return Promise.all(task);
    
18. }

复制代码

要等待全部下载完成，await downloadAll()即可。

李恒道

cxxjackie 发表于 2022-1-24 11:22
给你写个简单示例：

要等待全部下载完成，await downloadAll()即可。

大佬严谨！好久没看到cxxjackie哥哥了

ThisAV

李恒道 发表于 2022-1-24 10:50
看了一下，Gm_xhr不可以用await哦
他没有返回promise
可以自己封装一个

意思是我只能用递归的方法去满足我的需求?

ThisAV

cxxjackie 发表于 2022-1-24 11:22
给你写个简单示例：

要等待全部下载完成，await downloadAll()即可。

感谢大佬回帖，是我的描述有问题，现有的代码就是这个操作方法

startDownload 函数里

asyncPool 负责下载图片和打包

zipPack.generateAsync 执行下载动作

但是 zipPack.generateAsync  没有等待 asyncPool 的 GM_xhr 完成就执行了

该怎么优化这个？

李恒道

ThisAV 发表于 2022-1-24 14:58
意思是我只能用递归的方法去满足我的需求?

不用递归呀，
直接包装GM_xhr返回一个promise
然后全部塞到一个数组里
promise.all函数等待全部返回成功
进行下一步处理