Interoperability of JavaScript Promises for Efficient Chaining of Async jQuery Functions

When chaining asynchronous jQuery functions, it's often desirable to avoid jQuery's built-in Promises functionality and use native ES6 Promises instead. This interoperability allows seamless integration between jQuery actions and your desired Promise implementation.

Chaining Two getJSON Calls with Native Promises

To chain two $.getJSON calls without using jQuery's then() or .when(), follow these steps:

1. Resolve the first jQuery promise:

   Promise.resolve($.getJSON(url1, params1));

2. Chain the second call within a native then callback:

   .then((data1) => {
     return $.getJSON(url2, params2);
   })

This method ensures that the second call only executes after the first one has completed successfully, without relying on jQuery's Promises architecture.

Interfacing with Non-Standard Methods

While JavaScript promises are interoperable, utilizing non-standard methods or features requires explicit casting. For instance, to access a jQuery-specific method within a native Promise chain, use Promise.resolve() to cast the jQuery Promise into a native one before invoking the method:

Promise.resolve($.ajax(…))
  .then((data) => {
    // Use jQuery-specific method
    data.foo();
  })

This approach ensures that the foo() method is invoked within the context of the native Promise chain.

In summary, by understanding the interoperability of JavaScript promises, you can seamlessly combine jQuery's asynchronous capabilities with the desired Promise implementation for efficient chaining of async operations.