{"id":213,"date":"2019-12-27T03:07:00","date_gmt":"2019-12-27T03:07:00","guid":{"rendered":""},"modified":"2024-09-13T15:04:52","modified_gmt":"2024-09-13T15:04:52","slug":"javascript-how-to-convert-callback-to-promise","status":"publish","type":"post","link":"https:\/\/zofxare.com\/zofxare\/blog\/2019\/12\/27\/javascript-how-to-convert-callback-to-promise\/","title":{"rendered":"JavaScript How to Convert Callback to Promise"},"content":{"rendered":"

I finally finished upgrading my travel website<\/a> to use Promises instead of callbacks.<\/p>\n

It was fairly straightforward.<\/p>\n

This is an example of the callback:<\/p>\n

<\/pre>\n
\nfunction hasacallback(param1, callbackFunction) {
\n    var xhttp = new XMLHttpRequest();
\n  xhttp.onreadystatechange = function() {
\n    if (this.readyState == 4 && this.status == 200) {
\n     callbackFunction(this.responseText);
\n    }
\n  };
\n  xhttp.open(“GET”, “ajax_info.txt”, true);
\n  xhttp.send();
\n}<\/p>\n
function makeacall() {
\n    var callback = function() {
\n        console.log(‘All done’);
\n    }<\/p>\n
    hasacallback(‘abc’, callback);
\n}<\/p>\n
makeacall();<\/p>\n
\nThis is how the above would be updated to use Promises:<\/p>\n
<\/pre>\n
\nfunction usespromise(param1) {
\n    return new Promise((resolve, reject) => {
\n        var xhttp = new XMLHttpRequest();
\n        xhttp.onreadystatechange = function() {
\n            if (this.readyState == 4 && this.status == 200) {
\n                resolve(this.responseText);
\n             }
\n        };
\n        xhttp.open(“GET”, “ajax_info.txt”, true);
\n        xhttp.send();
\n    });
\n}<\/p>\n
function makeacall() {
\n    var callback = function() {
\n        console.log(‘All done’);
\n    }<\/p>\n
    usespromise(‘abc’)
\n    .then((result) => {
\n       callback();
\n    });
\n}<\/p>\n
makeacall();<\/p>\n
(paid links)<\/p>\n
Learn JavaScript<\/a><\/p>\n