JQuery中链式调用两个API接口问题求助（C# MVC+Kendo UI）

你的问题核心在于异步操作的执行时机：ControllerRequest是异步调用，它的onSuccess/onFailure回调要等API返回结果后才会执行，但你在调用ControllerRequest后立刻就判断validatedFlag，这时候回调还没触发，validatedFlag自然还是初始的false，导致第二个请求永远不会执行。

下面给你两种可行的解决方案：

方案1：直接在验证成功的回调中触发第二个请求 #

这是最直接的修改方式，把第二个API调用放到第一个请求的onSuccess回调里，确保只有验证通过后才执行后续操作：

$("#SubmitButton").on("click", function() {
    let request = {
        url: "@Url.Action("validate", "Validation")",
        parameters: {
            number: $("#MyInputField").data("kendoTextBox").value()
        },
        onSuccess: function (e) {
            // 验证通过后，直接在这里发起第二个请求
            let request2 = {
                url: "@Url.Action("GetProducts", "Products")",
                parameters: {
                    Id: 100
                },
                onSuccess: function (e) {
                    console.log("success");
                },
                onFailure: function (e) {
                    console.log("fail");
                }
            };
            ControllerRequest(request2);
        },
        onFailure: function (e) {
            // 验证失败的逻辑，比如提示用户
            console.log("验证失败");
        }
    };

    ControllerRequest(request);
});

方案2：将ControllerRequest封装为Promise，使用async/await简化流程 #

如果你的项目允许使用ES6+语法，可以把ControllerRequest改成返回Promise的函数，这样用async/await可以写出更线性、易读的代码，避免回调嵌套：

首先封装ControllerRequest：

function controllerRequestPromise(options) {
    return new Promise((resolve, reject) => {
        const request = {
            ...options,
            onSuccess: function(e) {
                // 先执行原有的成功逻辑
                if (options.onSuccess) options.onSuccess(e);
                resolve(e);
            },
            onFailure: function(e) {
                // 先执行原有的失败逻辑
                if (options.onFailure) options.onFailure(e);
                reject(e);
            }
        };
        ControllerRequest(request);
    });
}

然后修改点击事件的代码：

$("#SubmitButton").on("click", async function() {
    try {
        // 等待验证请求完成
        await controllerRequestPromise({
            url: "@Url.Action("validate", "Validation")",
            parameters: {
                number: $("#MyInputField").data("kendoTextBox").value()
            },
            onSuccess: function (e) {
                // 原有的验证成功逻辑
                console.log("验证通过");
            },
            onFailure: function (e) {
                // 原有的验证失败逻辑
                console.log("验证失败");
            }
        });

        // 验证通过后执行第二个请求
        await controllerRequestPromise({
            url: "@Url.Action("GetProducts", "Products")",
            parameters: {
                Id: 100
            },
            onSuccess: function (e) {
                console.log("获取产品成功");
            },
            onFailure: function (e) {
                console.log("获取产品失败");
            }
        });
    } catch (error) {
        // 捕获任何请求失败的情况
        console.log("请求出错：", error);
    }
});

两种方案都能解决你的问题，方案1更适合快速修改现有代码，方案2的代码结构更清晰，尤其适合后续有更多异步操作的场景。

内容的提问来源于stack exchange，提问作者Scottish Smile