Repetitive then/catch method on Javascript I have this function and looks ugly because there are a lot of "catch" doing the same. Any idea how to make it better?

saveUser: function(){
    let user_id = this.$route.params.user_id;
    let payload = this.user;

    updateUser(user_id, payload).then(response =&gt; {
        updateOrCreateAddresses(payload).then(response =&gt; {
            updateOrCreateBalances(payload).then(response =&gt; {
                this.success();
            }).catch(error =&gt; {
                this.showError(error)
            })
        }).catch(error =&gt; {
            this.showError(error)
        })
    }).catch(error =&gt; {
        this.showError(error)
    })
},
As I am not sure on how your Promises work, this is what I can come up with.

To reduce your catch nesting you could make each promise return another promise. This would force you to have a general .then and a general .catch after your updateUser method.

I stubbed a bit of code here:

var updateUser = new Promise(function(resolve, reject) {
  resolve("Promise one");
});

var updateOrCreateAddresses = new Promise(function(resolve, reject) {
  reject("Promise two"); // e.g. replace reject with resolve to see it "pass"
});

var updateOrCreateBalances = new Promise(function(resolve, reject) {
  resolve("Promise three");
});

var success = () =&gt; {
    alert("Success");
}

updateUser.then( x =&gt; {
    return updateOrCreateAddresses.then(y =&gt; {
        return updateOrCreateBalances.then(z =&gt; {
            return success;
        })
    })
})
.then(a =&gt; a())
.catch(err =&gt; alert(err));


What happens there? Each promise is returning another promise. If one promise fails, the promise will return the "error" to it's parent, where on updateUser the promise get's finally caught.