DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to convert an Ajax call to a Promise
Gishan Chaminga Abeysinghe
Gishan Chaminga Abeysinghe

Posted on

How to convert an Ajax call to a Promise

As you know $.ajax is the most famous way to do an ajax call to any api, but sometimes you might need to convert this callback based ajax call to promise based. Actually using this method you can convert any callback to a promise.

function ajaxPromise(data, url, type) {
   return new Promise(function (resolve, reject) {
        $.ajax({
          type,
          url,
          data,
          success: function (response) {
            resolve(response);
          },
          error: function (error) {
            reject(error);
          },
        });
    });
}
Enter fullscreen mode Exit fullscreen mode

What are the real benefits of this method

  • Now you can use this inside an try catch block with async await.
  • You can call your ajax calls in a for loop.
  • Avoid callback hell.
try {
   for (let index = 0; index < ajaxCalls.length; index++) {
       const { url, data,type } = ajaxCalls[index];
       res = await ajaxPromise(data, url, type);
   }
} catch (error) {
    console.log(error);
}
Enter fullscreen mode Exit fullscreen mode

I hope this article is useful for you.

Top comments (1)

Collapse
 
hexcube profile image
Rohan "HEXcube" Villoth

Thanks! This helped me fix the async/await hell on my project. πŸ˜ƒ

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post