Important

You are browsing upcoming documentation for version 7.0 of OroCommerce, scheduled for release in 2026. Read the documentation for the latest LTS version to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Using Native Promises Instead of jQuery Deferred

Starting with OroCommerce 7.0, the frontend framework is transitioning away from jQuery Deferred in favor of native Promises. Native Promises provide a standardized, modern, and more reliable way to handle asynchronous logic, and they integrate smoothly with newer features, such as async/await.

This document shows examples of replacing $.Deferred and $.when with equivalent Promise-based patterns.

Replacing initLayout().done() to initLayout().then()

Before (using .done() method)

After (using .then() method)

import BaseView from 'oroui/js/app/views/base/view';

const SomeView = BaseView.extend({
    render: function() {
        this.initLayout().done(() => {...});
    }
});

export default SomeView;

import BaseView from 'oroui/js/app/views/base/view';

const SomeView = BaseView.extend({
    render: function() {
        this.initLayout().then(() => {...});
    }
});

export default SomeView;

Replacing $.Deferred With Promise

Before (using $.Deferred)

After (using native Promise)

function loadData() {
  var d = $.Deferred();
  $.ajax({
    url: '/api/data',
    success: function (result) {
      d.resolve(result);
    },
    error: function () {
      d.reject('Request failed');
    }
  });
  return d.promise();
}
loadData()
  .done(function (result) {
    console.log('Loaded:', result);
  })
  .fail(function (err) {
    console.error(err);
  });

function loadData() {
  return new Promise(function (resolve, reject) {
    $.ajax({
      url: '/api/data',
      success: resolve,
      error: function () {
        reject('Request failed');
      }
    });
  });
});
}

loadData()
  .then(function (result) {
    console.log('Loaded:', result);
  })
  .catch(function (err) {
    console.error(err);
  });

Replacing $.when With Promise.all

Before (using $.when)

After (using Promise.all)

$.when(loadUser(), loadSettings())
  .done(function (user, settings) {
    console.log(user, settings);
  })
  .fail(function () {
    console.error('Failed');
  });

Promise.all([loadUser(), loadSettings()])
  .then(function ([user, settings]) {
    console.log(user, settings);
  })
  .catch(function () {
    console.error('Failed');
  });

Using async/await (optional)

Native Promises can also be used with async/await, which can simplify asynchronous code and make it easier to read.

async function init() {
  try {
    const result = await loadData();
    console.log('Loaded:', result);
  } catch (err) {
    console.error(err);
  }
}

init();

Summary of mappings

jQuery Deferred	Native Promise	Note
`$.Deferred()`	`new Promise()`	Replace custom deferred wrappers.
`promise.done(fn)`	`promise.then(fn)`	Success callback.
`promise.fail(fn)`	`promise.catch(fn)`	Error callback.
`promise.always(fn)`	`promise.finally(fn)`	Runs whether success or failure.
`$.when(a, b)`	`Promise.all([a, b])`	Returns array of results.