Javascript Fabricjs按一定顺序创建对象

我正在从服务器接收对象到fabricjs，并通过函数createSvgFromUrl初始化它们。对象的属性由服务器检索，图像位于网站内容文件夹中。在我的对象上，如果修改日期属性。但是，我无法正确地设置这些对象的z索引，因为可以在下面看到的loadSvgFromUrl在循环中为每个数组项异步激发，因此不会强制执行canvas.bringToFront的顺序。另一个问题是，如果接收到的数据中没有文本对象，则会按正确的顺序创建对象。正如您可以看到的，这个大IF对象的创建方式与文本对象不同

如何在画布上创建对象，以便从阵列中的服务器接收它们？

var addFabricObjects = function(fabricObjects) {
        for (var i = 0; i < fabricObjects.length; i++) {
            if (fabricObjects[i].text == null) {
                if (fabricObjects[i].src.startsWith("http")) {
                    var path = fabricObjects[i].src;
                    fabric.loadSVGFromURL(path, (function(i) {
                        return function(objects, options) {
                            var obj = fabric.util.groupSVGElements(objects, options);
                            obj.set(
                            {
                                width: fabricObjects[i].width,
                                height: fabricObjects[i].height,
                                left: fabricObjects[i].left,
                                top: fabricObjects[i].top,
                                src: fabricObjects[i].src,
                                mapId: fabricObjects[i].mapId,
                                id: fabricObjects[i].id,
                                tmpString: fabricObjects[i].tmpString,
                                scaleX: fabricObjects[i].scaleX,
                                scaleY: fabricObjects[i].scaleY,
                                angle: fabricObjects[i].angle,
                                hasRotatingPoint: fabricObjects[i].hasRotatingPoint,
                                index: fabricObjects[i].index,
                                modificationDate: fabricObjects[i].modificationDate,
                                originX: fabricObjects[i].originX,
                                originY: fabricObjects[i].originY,
                                selectable: !$scope.isReadOnly,
                                zindex: fabricObjects[i].zindex
                        }
                            );
                            obj.src = fabricObjects[i].src;
                            obj.toObject = (function(toObject) {
                                return function() {
                                    return fabric.util.object.extend(toObject.call(this), {
                                        mapId: this.mapId,
                                        tmpString: this.tmpString,
                                        id: this.id,
                                        fill: this.fill,
                                        width: this.width,
                                        height: this.height,
                                        src: fabricObjects[i].src,
                                        scaleX: this.scaleX,
                                        scaleY: this.scaleY,
                                        angle: this.angle,
                                        hasRotatingPoint: this.hasRotatingPoint,
                                        index: this.index,
                                        modificationDate: this.modificationDate,
                                        top: this.top * canvasScale,
                                        left: this.left * canvasScale,
                                        originX: this.originX,
                                        originY: this.originY,
                                        zindex: this.zindex
                                });
                                };
                            })(obj.toObject);

                            canvas.add(obj);

                        }
                    })(i));
                }
                else {
                    var path = fabricObjects[i].src;
                    fabric.Image.fromURL(path, function (oImg) {
                        oImg.toObject = (function (toObject) {
                            return function () {
                                return fabric.util.object.extend(toObject.call(this), {
                                    mapId: this.mapId,
                                    tmpString: this.tmpString,
                                    id: this.id,
                                    fill: this.fill,
                                    width: this.width,
                                    height: this.height,
                                    src: this.src,
                                    scaleX: this.scaleX,
                                    scaleY: this.scaleY,
                                    hasRotatingPoint: this.hasRotatingPoint,
                                    angle: this.angle,
                                    index: this.index,
                                    modificationDate: this.modificationDate,
                                    originX: this.originX,
                                    originY: this.originY,
                                    zindex: this.zindex
                                });
                            };

                        })(oImg.toObject);

                        canvas.add(oImg);
                    }, {
                        width: fabricObjects[i].width,
                        height: fabricObjects[i].height,
                        left: fabricObjects[i].left,
                        top: fabricObjects[i].top,
                        src: fabricObjects[i].src,
                        mapId: fabricObjects[i].mapId,
                        id: fabricObjects[i].id,
                        tmpString: fabricObjects[i].tmpString,
                        scaleX: fabricObjects[i].scaleX,
                        scaleY: fabricObjects[i].scaleY,
                        angle: fabricObjects[i].angle,
                        index: fabricObjects[i].index,
                        modificationDate: fabricObjects[i].modificationDate,
                        originX: fabricObjects[i].originX,
                        originY: fabricObjects[i].originY,
                        selectable: !$scope.isReadOnly,
                        zindex: fabricObjects[i].zindex

                    });
                }
            }
            else {

                var iText1 = new fabric.IText(fabricObjects[i].text, {
                    fontFamily: fabricObjects[i].fontFamily,
                    fontStyle: fabricObjects[i].fontStyle,
                    textDecoration: fabricObjects[i].textDecoration,
                    fill: fabricObjects[i].fill,
                    fontWeight: fabricObjects[i].fontWeight,
                    mapId: fabricObjects[i].mapId,
                    id: fabricObjects[i].id,
                    scaleX: fabricObjects[i].scaleX,
                    scaleY: fabricObjects[i].scaleY,
                    angle: fabricObjects[i].angle,
                    index: fabricObjects[i].index,
                    modificationDate: fabricObjects[i].modificationDate,
                    hasRotatingPoint: fabricObjects[i].hasRotatingPoint,
                    originX: fabricObjects[i].originX,
                    originY: fabricObjects[i].originY,
                    selectable: !$scope.isReadOnly,
                    zindex: fabricObjects[i].zindex

            });
                iText1.left = fabricObjects[i].left;
                iText1.top = fabricObjects[i].top;
                iText1.toObject = (function (toObject) {
                    return function () {
                        return fabric.util.object.extend(toObject.call(this), {
                            mapId: this.mapId,
                            tmpString: this.tmpString,
                            id: this.id,
                            fill: this.fill,
                            width: this.width,
                            height: this.height,
                            scaleX: this.scaleX,
                            scaleY: this.scaleY,
                            angle: this.angle,
                            flipX: this.flipX,
                            flipY: this.flipY,
                            index: this.index,
                            modificationDate: this.modificationDate,
                            hasRotatingPoint: this.hasRotatingPoint,
                            originX: this.originX,
                            originY: this.originY,
                            zindex: this.zindex
                        });
                    };
                })(iText1.toObject);
                canvas.add(iText1);
                iText1.mapId = Number($scope.mapId);
                iText1.tmpString = JSON.stringify(iText1);
            }
        }

        canvas.renderAll();
    }   

var addFabriObjects=函数（FabriObjects）{
对于（var i=0；i