ожидание завершения ajax перед следующим вызовом ajax

Я пытаюсь дождаться вызова ajax для завершения сохранения модели, прежде чем сохранять следующую модель в списке. Я гуглил и видел кое-что об отложенных объектах, которые для меня новы, и еще один ответ, в котором это делала рекурсивная функция. Я попробовал рекурсивный метод, потому что он казался более разумным, чем с отложенными объектами и использованием $.when.apply($, arrayOfAjaxCalls).then(). Итак, этот код (рекурсивный, выглядит так:

    saveModel(index, numRequests) {
        var self = this;

        if (index < numRequests) {
            var sample = self.samplesToSave[index];    

            return $.ajax({
                url: model.url,
                contentType: "application/json",
                type: "POST",
                data: JSON.stringify(model),
                crossDomain: $.support.cors,
                xhrFields: {
                    withCredentials: $.support.cors,
                },
                success: function(data) {
                    console.log("JUST SAVED");
                    console.log(data);
                },
                error: function(xhr: any) {
                    console.log(xhr);
                },
            }).then(() => {
                self.saveModel(index + 1, numRequests);
            });
        }
    }

Я называю это так:

saveModel(0, _.size(myCollection)

На самом деле он не ждет завершения вызова ajax в своем текущем состоянии перед вызовом следующего saveModel. По сути, он просто синхронно вызывает saveModel для каждого элемента в коллекции по порядку. Любые мысли о том, что мне не хватает? Если есть лучшее решение с $.Deferred, я тоже согласен. Спасибо.

Изменить: извините, я хотел сказать saveModel в последней строке функции saveModel. Пытался избавиться от частей, которые были специфичны для домена. И я использую машинопись, а не кофескрипт

Новая попытка:

    saveSampleNew() {
        var d = $.Deferred();
        d.resolve();
        var p = d.promise();
        var self = this;
        self.samplesToSave.forEach(sample => p = p.then(() => self.makeSaveRequest(sample)));

        return p;
    }

     makeSaveRequest(sample) {
        var self = this;

        return $.ajax({
            url:  "samples",
            contentType: "application/json",
            type: "POST",
            data: JSON.stringify(sample),
            crossDomain: $.support.cors,
            xhrFields: {
                withCredentials: $.support.cors,
            },
            success: function(data) {
                console.log("SAVED12");
                console.log(data);                    
            },
        });
    }

Поскольку этот код зависит от завершения других асинхронных вызовов, я называю эту новую попытку следующим образом:

this.saveContainers(project).then(() => {

}).done(() => {
    self.saveSampleNew();
});