获取多个异步urls数据，然后对结果进行操作(篡改猴子脚本)

Question

我对JS有点陌生，所以请耐心点。我正试图为一个网站创建一个Tamper猴子(greasyfork)脚本。

应采取以下步骤：

LocalStorage

• When

• 检查用户是否登录了

• (如果是)，转到他的“电影分级”页面并加载所有页面(例如，40页)，获取其HTML，提取电影评级并将其存储在已完成的

• 中，继续使用另一段代码(向表添加列等)

现在它可以工作，但它是同步的。因此，当数据不在LocalStorage中时，它将非常缓慢地加载每个页面(1页+- 1秒，典型为50-100页)，用户等待，并且不知道发生了什么事情。我的“弹出”函数不适用于“异步:假”，而是与“异步:真”一起工作。

但是当我使用异步时，它不会等待，而且代码的行为也不像我希望的那样。

如果你告诉我“做一个承诺，做一个回调”，我就不知道该怎么做了。我在谷歌上搜索了一天，没有发现任何有用的东西。

我通过工作代码示例/修改来学习。

我现在的代码(简化)

(() => {
    class Csfd {

        constructor(csfdPage) {
            this.csfdPage = csfdPage;
            this.stars = {};  // dict which is then saved as json to LocalStorage
            this.userUrl = undefined;
        }

        getCurrentUser() { ... }
        addRatingsColumn() { ... }

        REFRESH_RATINGS() {
            // Load user ratings...
            $.ajax({
                type: "GET",
                url: this.userRatingsUrl,  // page when pagination of all ratings starts
                async: false
            }).done((data) => {
                this.processRatingsPage(data);
            });

        }

        processRatingsPage(dataHTML) {
            var $stars = this.stars;
            $(dataHTML).find("tbody tr").each(function () {
                let starsRatings .... // simplified line, get the data of each rating row
                $stars[filmURL] = starsRating;
            });

            // Check if there is next page
            let nextPaginationURL = $(dataHTML).find("a.page-next").attr("href");
            if (nextPaginationURL) {
                // Next page exists, fetch it and repeat, add new ratings to `this.stars`
                this.loadPage(nextPaginationURL);
            } else {
                // No next page, finish...
                this.finishRefresh();
            }
        }
        
        loadPage(url) {
            let foundMatch = url.match(new RegExp("page=(.*)$"));
            let currentNum = 1;
            if (foundMatch.length == 2) {
                currentNum = foundMatch[1];
            }
            
            console.log(`${SCRIPTNAME} - Loading... ${currentNum}/${this.endPageNum}`);

            $.ajax({
                type: "GET",
                url: url,
                async: false
            }).done((data) => {
                this.processRatingsPage(data);
            });
        }

        finishRefresh() {
            this.exportRatings();  // export JSON stringify to LocalStorage
        }
    }
    
    // SCRIPT START
    csfd.userUrl = csfd.getCurrentUser();

    // If logged in, do some stuff
    if (csfd.userUrl !== undefined) {
        
        // If movie ratings not loaded in LocalStorage...
        csfd.REFRESH_RATINGS();
   }
   
   // --> THIS IS CALLED BEFORE REFRESH_RATINGS ENDS IF I DO async: true
   if (Object.keys(this.stars).length != 0) {
       // Continue after movie ratings are loaded
       csfd.addRatingsColumn();
   }

}

Answer 1

您可以将ajax调用包装在一个Promise中，该调用在调用返回时被解析。就像这样：

(async () => {
       ...

        async REFRESH_RATINGS() {
            // Load user ratings...
            return new Promise((resolve, reject) => { 
               $.ajax({
                  type: "GET",
                  url: this.userRatingsUrl,  // page when pagination of all ratings starts
                  async: true
               }).done((data) => {
                  this.processRatingsPage(data);
                  resolve();
               })
            });
        }

       ...

       if (csfd.userUrl !== undefined) {
          // If movie ratings not loaded in LocalStorage...
          await csfd.REFRESH_RATINGS();
       }
       ...