DEV Community

Cover image for How to convert an Ajax call to a Promise
Gishan Chaminga Abeysinghe
Gishan Chaminga Abeysinghe

Posted on

5 3

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
rohanvilloth profile image
Rohan Villoth

Thanks! This helped me fix the async/await hell on my project. 😃

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more