Error handling and retries with AJAX requests in Knockout

Ravi Vishwakarma 337 23 Apr 2025

Ravi Vishwakarma

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

1 Answers

Ravi Vishwakarma 23 Apr 2025

Handling errors and retries in AJAX requests is crucial for making your Knockout.js apps robust, especially when dealing with flaky connections or server issues. Let’s go over a clean and reusable way to do this using observables, retry logic, and error UI feedback.

Basic Setup with Observables

function DataViewModel() {
  const self = this;

  self.data = ko.observable(null);
  self.error = ko.observable('');
  self.loading = ko.observable(false);
  self.retryCount = ko.observable(0);
  const MAX_RETRIES = 3;

  self.loadData = function () {
    self.loading(true);
    self.error('');

    $.ajax({
      url: '/api/data',
      method: 'GET',
      success: function (response) {
        self.data(response);
        self.retryCount(0); // reset retry count on success
      },
      error: function (xhr, status, err) {
        self.retryCount(self.retryCount() + 1);

        if (self.retryCount() < MAX_RETRIES) {
          console.warn(`Retry ${self.retryCount()}...`);
          setTimeout(self.loadData, 1000); // retry after 1s
        } else {
          self.error("Failed to load data after several attempts.");
        }
      },
      complete: function () {
        self.loading(false);
      }
    });
  };

  self.retryNow = function () {
    self.retryCount(0);
    self.loadData();
  };

  self.loadData(); // Initial load
}

ko.applyBindings(new DataViewModel());

HTML Template Example

<div data-bind="if: loading">
  <p>🔄 Loading data...</p>
</div>

<div data-bind="if: error">
  <p style="color: red;" data-bind="text: error"></p>
  <button data-bind="click: retryNow">Retry</button>
</div>

<div data-bind="if: data">
  <pre data-bind="text: ko.toJSON(data, null, 2)"></pre>
</div>

Best Practices

Tip	Why
Use `.retryCount()`	To control retry attempts
`setTimeout()`	Avoid hammering the server immediately
`self.error()`	Show user-friendly messages
Wrap `$.ajax()`	Use a custom utility function for reuse

Optional: Create a Reusable `ajaxWithRetry` Utility

function ajaxWithRetry(options, maxRetries = 3, delay = 1000) {
  let attempts = 0;

  function attemptAjax(resolve, reject) {
    $.ajax({
      ...options,
      success: resolve,
      error: function (xhr, status, err) {
        if (++attempts < maxRetries) {
          setTimeout(() => attemptAjax(resolve, reject), delay);
        } else {
          reject(err);
        }
      }
    });
  }

  return new Promise((resolve, reject) => {
    attemptAjax(resolve, reject);
  });
}

Now use it like this in your ViewModel:

self.loadData = function () {
  self.loading(true);
  self.error('');

  ajaxWithRetry({ url: '/api/data', method: 'GET' })
    .then(data => self.data(data))
    .catch(() => self.error("Failed after multiple retries"))
    .finally(() => self.loading(false));
};

interview