javascript - 您将如何自动重试失败的 ajax 调用 3 次(同步)？

Question

我正在尝试重新运行失败的 AJAX 调用 3 次。第三次尝试后，我想调用一个失败的方法。我不希望 AJAX 调用相互过度运行。

用我正在使用的东西实现这一目标的最安全/最好的方法是什么？

我正在使用这样的 globalAjaxRequest 方法:

globalAjaxRequest(request, successCallback, errorCallback) {
        let ajaxRequest = null;

        if (request.url) {
            const ajaxOptions = {
                type: request.method ? request.method.toUpperCase() : 'POST',
                url: request.url,
                data: request.data || undefined,
                beforeSend: request.beforeSend,
                success: (data) => {
                    successCallback(data);
                },
                error: (data) => {
                    if (errorCallback) {
                        errorCallback(data);
                    }
                }
            };

            ajaxOptions.dataType = request.dataType || 'json';
            ajaxOptions.contentType = request.contentType || 'application/json; charset=utf-8';

            if (request.contentType) {
                ajaxOptions.data = $.parseJSON(JSON.stringify(ajaxOptions.data));
            } else {
                ajaxOptions.data = JSON.stringify(ajaxOptions.data);
            }

            ajaxRequest = $.ajax(ajaxOptions);
        }

        return ajaxRequest;
    }
}

这是我的尝试:

callAPI() {
    const callData = {
        url: '/callApi',
        data: {
            id: 'something'
        }
    };

    global.Utils.globalAjaxRequest(callData, (success) => {
        console.log('success');
        successMethod();
    }, (fail) => {
        for (let i = 1;; i++) {
            i <= 3 && setTimeout(() => {
                callAPI();
            }, 1000);

            if (i > 3) {
                failedMethod();
                break;
            }
        }
    });
}

callAPI();

Answer 1

您不能重试异步操作，例如 $.ajax()同步，所以我假设你只是想在失败时自动按顺序重试。

这是 $.ajax() 的通用重试函数:

// general purpose promise delay, useful when you want to delay a promise chain
function pDelay(t, v) {
    return new Promise(function(resolve) {
        setTimeout(resolve, t, v);
    });
}

// three arguments:
//   options: value for $.ajax(options) - does not support other forms of calling $.ajax()
//   delay: amount of time in ms to delay before each retry (can be 0 if you want)
//   retries: number of times to retry, defaults to 3 if you don't pass it
$.ajaxRetry = function(options, delay, retries) {
    // default value for retries is 3 if the argument is not passed
    let retriesRemaining = retriesRemaining !== undefined ? retriesRemaining: 3;

    let opts = Object.assign({}, options);

    function run() {
        return $.ajax(opts).catch(function(err) {
            --retriesRemaining;
            // don't fire this more than once
            delete opts.beforeSend;
            if (retriesRemaining > 0) {
                // try again after short delay
                return pDelay(delay).then(run);
            } else {
                // hit max retries, propagate error back to caller
                throw e;
            }
        });
    }
    return run();
}

仅供引用，此代码假定在您的情况下“失败”意味着 $.ajax() 的 promise 拒绝。如果“失败”意味着其他东西(例如查看您得到的某些结果)，那么您将不得不将该附加测试插入重试循环或公开一个回调，以便可以在外部提供该附加测试。

要将其集成到您的包装器中，您可以这样做:

globalAjaxRequest(request, successCallback, errorCallback) {
        let ajaxRequest = null;

        if (request.url) {
            const ajaxOptions = {
                type: request.method ? request.method.toUpperCase() : 'POST',
                url: request.url,
                data: request.data || undefined,
                beforeSend: request.beforeSend,
            };

            ajaxOptions.dataType = request.dataType || 'json';
            ajaxOptions.contentType = request.contentType || 'application/json; charset=utf-8';

            if (request.contentType) {
                ajaxOptions.data = $.parseJSON(JSON.stringify(ajaxOptions.data));
            } else {
                ajaxOptions.data = JSON.stringify(ajaxOptions.data);
            }

            errorCallback = errorCallback || function(err) { throw err; };
            ajaxRequest = $.ajaxRetry(ajaxOptions, 0, 3).then(successCallback, errorCallback);
        }

        return ajaxRequest;
    }
}

仅供引用，采用 Promise 接口(interface)并将其转换回普通回调有点奇怪。看来你应该摆脱 successCallback和 errorCallback让调用者使用返回的 promise 。