javascript - 将 jQuery .each 中具有多个 .get() 的函数转换为 q Promise

Question

我正在使用这个问题的优秀答案question将 svg 图像转换为内联 html。

该函数查看容器或主体，找到每个 .svg 图像并将它们转换为内联 html。

但是，它使用 $.get() 调用来检索 svg 文件这使得该函数异步。

我想将函数转换为 promise ，以便我可以在运行其他操作之前等待它完成(例如向新的内联 html 添加或删除类等)

我当前的尝试如下所示:

util.convertSvgImages = function(container) {
    var deferred = Q.defer();
    container = typeof container !== 'undefined' ? container : $("body");

    var getsToComplete = jQuery('img.svg', container).length;   // the total number of $get.() calls to complete within the $.each() loop
    var getsCompleted = 0;                                      // the current number of $get.() calls completed (counted within the $get.() callback)

    jQuery('img.svg', container).each(function(index) {
        var img = jQuery(this);
        var imgID = img.attr('id');
        var imgClass = img.attr('class');
        var imgURL = img.attr('src');
        jQuery.get(imgURL, function(data) {
            getsCompleted += 1;

            var svg = jQuery(data).find('svg');                         // Get the SVG tag, ignore the rest

            if (typeof imgID !== 'undefined') {                         // Add replaced image's ID to the new SVG
                svg = svg.attr('id', imgID);
            }

            if (typeof imgClass !== 'undefined') {
                svg = svg.attr('class', imgClass + ' replaced-svg');    // Add replaced image's classes to the new SVG
            }

            svg = svg.removeAttr('xmlns:a');                            // Remove any invalid XML tags as per http://validator.w3.org

            svg.attr('class', img.attr("data-svg_class") + " svg");     // add class to svg object based on the image data-svg_class value

            $('rect', svg).attr("stroke", "").attr("fill", "");
            $('line', svg).attr("stroke", "").attr("fill", "");
            $('path', svg).attr("stroke", "").attr("fill", "");
            $('polyline', svg).attr("stroke", "").attr("fill", "");
            $('polygon', svg).attr("stroke", "").attr("fill", "");
            $('circle', svg).attr("stroke", "").attr("fill", "");

            img.replaceWith(svg);                                       // Replace image with new SVG

            if (getsCompleted === getsToComplete){
                deferred.resolve('OK');
            }
        }, 'xml');
    });
    return deferred.promise;
};

在 $.each() 循环内的异步调用中使用 Promise 的最佳方法是什么？使用 q.all() ？

Answer 1

jQuery.get 返回一个 Promise，因此，您可以使用它和 jquery.map 来创建可在 q.all 中使用的 Promise 数组(或 Promise.all )

util.convertSvgImages = function(container) {
    // ... snip
    var promises = jQuery('img.svg', container).map(function(index) {
        // ... snip
        return jQuery.get(imgURL, function(data) {
            // ... snip
        }, 'xml');
    });
    return q.all(promises);
};

使用

util.convertSvgImages().then(.....)

注意:如果任何 .get 失败，Q.all 将拒绝一旦失败，而不是全部解决 .gets 已完成...您可能需要使用 q.allSettled - 这将等待所有 .get 完成(成功或失败)，您可以检查.then 代码失败。请参阅 q.allSettled 的文档