小编典典

进行ajax调用时如何正确重用代码

all

我正在使用最新的 JQuery (3.6)。我的代码中有多个 ajax 调用到同一个端点。我必须制作重复的方法,因为根据响应,在.done函数中,我必须应用单独的业务逻辑,并且在出现错误的情况下应用额外的逻辑来向用户显示错误。我想知道我是否可以重用相同的 ajax 调用代码,因为那不会改变。这是我的 JS 函数:

js function 1

function dosomething1(req) {

    var send_on = "/api/url";
    var timeoutTime = 10000;

    $.ajax({
        type: "POST",
        url: send_on,
        contentType: 'application/json',
        data: JSON.stringify(req),
        cache: false,
        dataType: "json",
        tryCount: 0,
        retryLimit: 1,
        timeout: timeoutTime
    })
        .done(function(response) {
            // this is where I'm doing my businses logic
            do_very_specific1_to_response(response);
        })
        .fail(function(xhr, status, error) {
            // this is where I'm doing error handling
            handle_very_specific1_to_response();
}

jsfunction2

function dosomething2(req) {

    var send_on = "/api/url";
    var timeoutTime = 10000;

    $.ajax({
        type: "POST",
        url: send_on,
        contentType: 'application/json',
        data: JSON.stringify(req),
        cache: false,
        dataType: "json",
        tryCount: 0,
        retryLimit: 1,
        timeout: timeoutTime
    })
        .done(function(response) {
            // this is where I'm doing my businses logic
            do_very_specific2_to_response(response);
        })
        .fail(function(xhr, status, error) {
            // this is where I'm doing error handling
            handle_very_specific2_to_response();
}

如您所见,我没有为 ajax 请求和重试逻辑更改任何内容,这始终是相同的,改变的是我处理响应的方式。

我正在考虑应用$.when().then()机制,但不确定它将如何处理重试逻辑。


阅读 65

收藏
2022-08-16

共1个答案

小编典典

一种方法是将 ajax 调用包装在一个 Promise 中。

function dosomething(req) {
    return new Promise((resolve, reject) => {
        var send_on = "/api/url";
        var timeoutTime = 10000;

        $.ajax({
            type: "POST",
            url: send_on,
            contentType: 'application/json',
            data: JSON.stringify(req),
            cache: false,
            dataType: "json",
            tryCount: 0,
            retryLimit: 1,
            timeout: timeoutTime
        })
            .done(function(response) {
                // this is where I'm doing my businses logic
                resolve(response);
            })
            .fail(function(xhr, status, error) {
                // this is where I'm doing error handling
                reject(error);
            })
}

function dosomething1(req) {
    dosomething(req)
        .then(response => {
            do_very_specific1_to_response(response);
        })
        .catch(error => {
            handle_very_specific1_to_response();
        })
}

function dosomething2(req) {
    dosomething(req)
        .then(response => {
            do_very_specific2_to_response(response);
        })
        .catch(error => {
            handle_very_specific2_to_response();
        })
}
2022-08-16