失败后重复请求并返回正常的应用程序流程

Question

快速上下文：

用户网络出现问题，我需要向服务器重复请求以继续加载应用程序，而不显示错误。

应用程序中的现有代码：

  ajaxPostWithRootData = function (url, rootData) {
    //prepare request

    var request = decoratorFunction(
      $.ajax({
       //standard data required to send request
      })
    )
      .done(function (result) {
        // normal flow
      })
      .fail(function (e) {
        //I want to repeat call after 1 second
      });

    return request;
  };

示例呼叫：

    return ajaxPostWithRootData(url, data)
      .done(function (result) {
      //do some stuff       
      })
      .fail(function (e) {
        //hide loading, show error message
      });
  };

我想在fail()中写类似的内容：

//repeatOnFail is a new function's param to prevent infinite loop 
if (shouldRepeatOnConnectionProblem(repeatOnFail, e)) {
    setTimeout(() => ajaxPostWithRootData(url, rootData, false), 1000);
}

不幸的是，JS在这里异步工作，即使我在第二个请求中获得成功响应，也为时已晚，因为应用程序从第二个fail()开始执行代码。

您知道在第二次呼叫后收到成功响应后，如何将此代码更改为“返回”正确的流程？

我对JS的知识很差，所以即使我知道如何解决它，我也不知道如何实现解决方案； /

Answer 1

如果我理解正确，您想使用固定的配置来调用$.ajax({..})，如果第一次调用失败，请立即使用相同的配置重试$.ajax({..})请求，在这种情况下，对ajaxPostWithRootData的以下更改应实现您的要求：

var ajaxPostWithRootData = function(url, rootData) {

  // Define reusable function that sets up and invokes
  // ajax request
  var doRequest = function() {
    return decoratorFunction(
      $.ajax({
        //standard data required to send request
      })
    )
  }      

  return doRequest() // <-- First attempt at ajax request
  .catch(function(err) {
    // Catch error first first attempt, prevent it from propagating
    // to external fail() handler
    log.error("First attempt failed. Retrying..");

    return doRequest();  // <-- Second attempt if first failed
  })
  .done(function(result) {
    // normal flow

    // Probably want to return data for external use
    return result;
  })
};

这些更新也应该与您的外部代码很好地配合，并保留您要跟踪的事件的总体流程。

希望有帮助！