Javascript 承诺：避免分叉/分裂，先用链条锁住，然后再这样做

这是现在的代码，承诺链和以前一样。我已经开始尝试使用Promise.all（）来远离反模式

(function(){
'use strict';

function DOMObj(){
    var that = this;

    that.items = [];

    that.getitems = function(url) {
        return new Promise (resolve => {
                $.getJSON(url, function (response) {
                    for (var i = 0; i < response.sales.length; i++) {

                        that.items.push(new ProductObj(response.sales[i], i));

                    }
                    resolve();
                });
            }
        )
    };

    that.updateProductHTML = function(){
        return new Promise(resolve => {
            for( var i = 0; i < that.items.length; i++){

                that.items[i].updateHTML();

            }
            resolve();
        })
    };

    that.updateDOM = function() {
        return new Promise(resolve => {
            var thisHTML = '';

            for( var i = 0; i < that.items.length; i++) {

                if (i % 3 === 0 ) {
                    thisHTML += "<div class='row'>";
                    // console.log("START");
                }

                thisHTML += that.items[i].htmlView;

                if ((i % 3 === 2) || i === (that.items.length - 1) ) {
                    thisHTML += "</div>";
                     console.log("FINISH");
                }
            }
            $("#content").append(thisHTML);
            resolve();
        })
    }
}

function ProductObj(product, i) {
    var that = this;

    that.photo = product.photo;
    that.title = product.title;
    that.subtitle = product.subTitle;
    that.url = product.url;

    that.htmlView = "";
    that.index = i;


    that.updateHTML = function() {
        $.get('template.html', function(template){
            that.htmlView = template.replace('{image}', that.photo)
                .replace('{title}', that.title)
                .replace('{subtitle}', that.subtitle)
                .replace('{url}', that.url);

             console.log(that.index + ' product has worked through html')
        })
    };
}
var myView = new DOMObj();

myView.getitems('data.json')
    .then(
        myView.updateProductHTML
    )
    .then(
        myView.updateDOM()
    )
    .then(() =>{
        $('.deleteButton').click(() => {
            $(this).parent().remove();
        });

//Promise.all([ myView.getitems('data.json'), myView.updateProductHTML, myView.updateDOM, () => {$('.deleteButton').click(() => {
    //$(this).parent().remove();
//})}])

})();

（函数（）{
"严格使用",；
函数DOMObj（）{
var=这个；
即.items=[]；
that.getitems=函数（url）{
返回新承诺（解决=>{
$.getJSON（url、函数（响应）{
对于（变量i=0；i{
对于（var i=0；i{
var thisHTML=''；
对于（var i=0；i{
$（'.deleteButton'）。单击（（）=>{
$（this.parent（）.remove（）；
});
//Promise.all（[myView.getitems（'data.json'）、myView.updateProductHTML、myView.updateDOM，（）=>{$（'.deleteButton'）。单击（（）=>{
//$（this.parent（）.remove（）；
//})}])
})();

---

到目前为止，代码的运行顺序是

getItems=>updateProductHTML

然后

updateDOM

与它一起运行，我试图添加的最后一个代码是一个按钮上的点击事件，它需要最后运行一次将您的函数更改为返回一个承诺，该承诺将在回调函数完成后得到解决:

this.updateHTML = function() {
    return new Promise(resolve => {
        $.get('product-template.html', function(template) {
            this.htmlView = template.replace('{image}', this.photo)
                .replace('{string1}', this.string1)
                .replace('{string2}', this.string2)
                .replace('{url}', this.URL)
                .replace('{class}', this.class);
            resolve();
        });
    });
};

同样适用于

getData（）

---

然后，您应该能够轻松地链接以下步骤：

getData().then(updateHTML).then(updateDOM);

---

好的，通过这个设置，我同时得到getData=>updateProductHTML和updateDOM。我不能把承诺放在updateHTML中，因为它是另一个for循环的内部，所以该表无法到达它。我把它放在for循环上，但它没有正确运行避免！@Bergi有趣的阅读。这主要适用于

getData

，但作为一种可能性l

fetch

已经返回了一个承诺，而不是

updateHTML

，对吗？您的

updateHTML

正在使用一个承诺-

$。get（…）

。它确实会进行可选回调，但总是返回一个（jQuery）承诺。您可以简单地

忽略它，甚至将该回调放入
中。然后（…）
call。如果您不想使用jQuery承诺，[只需将其包装成一个
Promise.resolve（…）
。请向我们展示您的实际代码。不要说“我的承诺是这样设置的”，然后向我们展示严重破坏的（伪？）code.That
this.updateHTML
看起来是异步的，是的，但它实际上需要
返回
$。get
保证有用！这是代码跳过器，但这是您遇到问题的代码，所以请不要跳过它。不，这是实际的代码