how-to-promisify-an-ajax-call/

[utterances-bot]

How to Promisify an Ajax Call | Tania Rascia

Let's say you have an AJAX call, and some other function that depends on the AJAX call loading before it runs. Here's the AJAX function. And…

https://www.taniarascia.com/how-to-promisify-an-ajax-call/

[willkf25]

Thank you so much!!!!! That saved me

[ubald-lab]

Dear Tania, Your work "How to Promisify an Ajax Call" , has helped me to take the next step !!

[alexbrinkman0]

Thank you so much! I've been having trouble wrapping my mind around promises for a bit for some reason. This explanation makes sense to me. Thanks again!

[LeauHic]

The best article I found about this topic so far ! Thank you, it helped me a lot :)

[Griefchief]

One thousand thank yous. Thank you very much again!

[whatfoxknows]

Oh my goodness I've tried a dozen solutions and this one was exactly what I needed to get my ajax calls returned in the specific order I sent them. Thank you so much!

[sudipbarmandev]

Great ... :)

[mikeTheMSFan]

Thank you!

[fhuo-ch]

Hi I have a strange problem using ajax to get the ipaddress written in PHP on the server. The response is written in a new screen. Why? The new screen shows the answer from PHP. On the original screen the response from PHP is written correctly to local storage. Is the response to fast? Is my coding ok? Thanks for help - Freddy

    function doTheThing() {
        return new Promise((resolve, reject) => {
            url = "./get_ipaddress.php";
            var n = location.hostname.indexOf("localhost");
            if (n >= 0) {
                url = "get_ipaddress.php";
            }
            $.ajax({
                url: url,
                type: 'POST',
                success: function (data) {
                    resolve (data)
                },
                error: function (error) {
                    reject (error)
                }
            })
        })

    function get_ipadress() {
        //localStorage.clear("crz_ip_address");
        if (localStorage.getItem("crz_ip_address") === null) {
            doTheThing()
                .then((data) => {
                    var split = data.split(";");
                    localStorage.setItem("crz_ip_address", split[0]);
                })
                .catch((error) => {
                    alert (error);
                    alert('Network error has occurred please try again!');
                })
        }
    }
    }

[Griefchief]

@fhuo-ch The issue is not in the code presented, or at least I don't see it. You are triggering this either from a form (via html attributes) or some other code that is sending you where you don't want to be. Things to try:

1) comment out half of the code each time till you figure out which part of code is causing it 2) step through the code with debugger till you figure out which code is causing it (it will change the html page and generate an event in the networking tab of the debugger) 3) replace $.ajax with axios if you think ajax might be causing it (in the remote case 1 and 2 don't work) 4) read $.ajax documentation 5) check the networking and console tabs of the firefox/chrome debugger for clues. 6) try the Fetch API instead of $Ajax or axios, it's well suported now, check "caniuse dot com".

Good luck.

[ericewers]

Thank you! You've been a big help! I was having the hardest time getting my 2nd function to run only when the AJAX finished loading its data.

[wingled22]

I tried the code written but not executing properly, so I use this instead:

function emailOnChange(e) {
        const promiseUpdateEmailExist = new Promise(function (resolve, reject) {
            $.ajax({
                url: "url_here",
                data: data_here,
                success: function (data) {
                    resolve(data)
                },
                error: function (data) {
                    reject(error)
                }
            });
        });

        promiseUpdateEmailExist.then((data) => {
           //code if success
        }).catch(function (error) {
           //code if error
        });
    }

[theophany77]

Dear Tania, it works like a charm. Thank you so much ! Jean-michel A., France

[zhangr4]

Hi Tania, thank you very much for this post. I am also using your VS Code theme.

[david-kariuki]

This is awesome, Thank you.

[VongphetPSV]

Many thanks Tania for sharing. This is awesome and very useful

[dilaraaydin]

thank you!

[xIDMONx]

Muchas gracias y gracias por compartir tu conocimiento y experiencia.

[selimkoc]

You could do the Ajax call not asynchronously by adding this option to your jQuery Ajax call: async: false If you do so, your next function will wait your Ajax call. No extra work is necessary.

[klupa-gotoma]

This example makes promises so clear.