从$ .ajax调用返回Javascript Promise

Question

我试图将一个$ .ajax（）语句转换为es6 Promise并返回es6 promise。我的想法是，我将有一个创建，更新，删除对Microsoft Dynamics Web API的调用的应用程序层，它返回一个es6 Promise，以便我可以在多个页面上重用Create，Update，Delete调用。我已经阅读了关于es6 Promises的Google，MDN和David Walsh Blog文章以及几个SO问题，但我还没有完全详细说明这些细节。

在下面的代码中，当ExpenseUpload.js调用expenseTransactionSetAPI.Create(newExpenseTransactionSet).then(...));时，我看到执行转到then()，但then()内的任何内容都没有执行。我不太确定我需要做出哪些更改，以便我的代码执行实际处理then()，我甚至不确定我是否正确使用es6 Promises。任何指导都将不胜感激。

ExpenseUpload.js

"use strict";

requirejs.config({
    bundles: {
        'CCSEQ.WebAPI.js': ['Model/ExpenseTransaction', 'Model/ExpenseTransactionSet', 'API/ExpenseTransaction', 'API/ExpenseTransactionSet']
    }
});

require(["Model/ExpenseTransaction", "Model/ExpenseTransactionSet", "API/ExpenseTransaction", "API/ExpenseTransactionSet"], function (ExpenseTransactionModel, ExpenseTransactionSetModel, ExpenseTransactionAPI, ExpenseTransactionSetAPI) {

let file;

$(document).ready(() => {
    setupHandlers();
});

function setupHandlers() {
    $("#csv-file").change((e) => {
        file =  e.target.files[0];
    });

    $("#btnUploadFile").click(() => loadFile());
}

function loadFile() {
    Papa.parse(file, {
        complete: (results) => {
            ImportExpenseTransaction(results.data);
            console.log("import complete");
        }
    });
}

function ImportExpenseTransaction(data) {
    let newExpenseTransactionSet = new ExpenseTransactionSetModel.ExpenseTransactionSet();
    newExpenseTransactionSet.SetName = $("#UploadName").val();
    newExpenseTransactionSet.Month = $("#UploadMonth").val();
    newExpenseTransactionSet.Year = $("#UploadYear").val();
    newExpenseTransactionSet.ImportDate = new Date();
    newExpenseTransactionSet.Status = 100000000;        

    let newExpenseTransactions = new Array();
    data.forEach((expense) => {
        if (expense[0] !== "PR EMP ID") {
            let newRecord = new ExpenseTransactionModel.ExpenseTransaction();
            newRecord. = expense[n];  
            ... // Load other records like above
            newExpenseTransactions.push(newRecord);
        }
    });

    let expenseTransactionSetAPI = new ExpenseTransactionSetAPI.ExpenseTransactionSet();
    let expenseTransactionAPI = new ExpenseTransactionAPI.ExpenseTransaction();
    expenseTransactionSetAPI.Create(newExpenseTransactionSet).
        then((data) => {
            console.log(data);
            console.log("Transaction Set Created");
            expenseTransactionAPI.
                Create(newExpenseTransactions[0]).
                then(() => {
                    console.log("Transaction Created");
                }).catch(() => {
                    console.log("failure");
                });
        }).catch(() => {
            (data) => {
                console.log(data);
                console.log("failure");
            }
        });        
}
});

CCSEQ.WebAPI.js

define("API/ExpenseTransaction", ["require", "exports", "API/APIBase", "Model/ExpenseTransaction"], function (require, exports, APIBase_1, Model) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    class ExpenseTransaction extends APIBase_1.APIBase {
        constructor() {
            super();
            this.ConvertToEntity = (data) => {
                let result = new Array();
                for (let i = 0; i < data.length; i++) {
                    let newRecord = new Model.ExpenseTransaction();
                    newRecord.[field] = data[i]["fieldName"];
                    .
                    .
                    .
                    result[i] = newRecord;
                }
                return result;
            };
        }
        Create(expense) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: this.ExpenseTransaction,
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(expense.toJSON()),
                    success: (data) => { resolve(data); },
                    error: (data) => { reject(data); }
                });
            });
        }
        ;
    }
    exports.ExpenseTransaction = ExpenseTransaction;
});
define("API/ExpenseTransactionSet", ["require", "exports", "API/APIBase", "Model/ExpenseTransactionSet"], function (require, exports, APIBase_2, Model) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    class ExpenseTransactionSet extends APIBase_2.APIBase {
        constructor() {
            super();
            this.ConvertToEntity = (data) => {
                let result = new Array();
                for (let i = 0; i < data.length; i++) {
                    let newRecord = new Model.ExpenseTransactionSet();
                    newRecord.[field] = data[i]["fieldName"];
                    .
                    .
                    .
                    result[i] = newRecord;
                }
                return result;
            };
        }
        Create(expenseSet) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: this.ExpenseTransactionSet,
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(expenseSet.toJSON()),
                    success: (data) => {
                        resolve(data);
                    },
                    error: (data) => {
                        reject(data);
                    }
                });
            });
        }
        ;
    }
    exports.ExpenseTransactionSet = ExpenseTransactionSet;
});
//# sourceMappingURL=CCSEQ.WebAPI.js.map

Answer 1

只需返回ajax个请求，它就会返回一个类似承诺的对象。

  

jQuery 1.5中$ .ajax（）返回的jqXHR对象实现了   Promise接口，为它们提供所有属性，方法和   承诺的行为

Create(expense) {
       return $.ajax({
            url: this.ExpenseTransactionSet,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(expenseSet.toJSON())
        });
}