Remaking the functionality of jQuery's $.ajax() method while utilizing the .done() method

Question

Remaking the functionality of jQuery's $.ajax() method while utilizing the .done() method

As a junior javascript developer, I am working on creating my own "basic" javascript framework inspired by jQuery. I am particularly fond of method chaining instead of callbacks, but I am finding it challenging to implement this.

Currently, I have developed my own version of an ajax "class", but I am struggling to replicate the functionality of .done() used in jQuery.

My goal is to have a syntax like this to eliminate callback hell:

ajax(url, type, data).success(function(response){});

However, when I try this, the response ends up being false because it is called before the ajax request is complete.

I attempted to implement a promise, but I encountered syntax errors and vague error messages like uncaught (in promise) OK.

This is the current state of my code:

// Code snippet

-- My serialize function:

// Code snippet

-- NOTE:

I am aiming to use the ajax function in this manner:

ajax(url, type, data).success(function(response){
  // Handle responseData before the callback
  // On success
}).error(function(error){
  // On error
});

-- This does not necessarily have to involve promises. Any alternative methods are acceptable, as I am open to exploring different approaches.

javascript ajax

Answer 1

Answer №1

Here is an example of how promises can be used. In this scenario, the ajax function would return a promise instead of being a constructor. The method used to chain promises is called then.

var ajax = function(url, method, data) {
    return new Promise(function (resolve, reject) {
        var xhttp = new XMLHttpRequest(),
            strType = method.toLowerCase(),
            methods = {
                get: function() {
                    var urlParams = serialize(data);
                    xhttp.open("GET", url + urlParams);
                }
            };
        methods[strType]();
        xhttp.send();
        xhttp.onreadystatechange = function() {
            if (this.readyState !== 4) return;
            resolve(this.status == 200 ? this.responseText : this.statusText);
        };
        xhttp.onerror = xhttp.onabort = reject;
    });
};

//Example function call;
ajax('http://httpstat.us/200?sleep=200', 'GET', {
    'Testval': 'testvalue',
    'field': 'value'
}).then(function(response) {
    console.log("Response is:" + response);
}).catch(function() {
    console.log("There was an error or the request was aborted.");
});

function serialize(obj, prefix) {
    var str = [], p;
    for(p in obj) {
        if(obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
            str.push((v !== null && typeof v === "object") ?
                serialize(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return '?' + str.join("&");
};

If you want to use the name success instead of then, you can do the following:

    var promise = new Promise(function (resolve, reject) {
        // ...etc
    });
    promise.success = promise.then;
    promise.error = promise.catch;
    return promise;

:-) Keep in mind that using non-standard method names for promises may not be the best practice. It's recommended to stick with standard promise methods for consistency.

Answer 2

Here is an example of how promises can be used. In this scenario, the ajax function would return a promise instead of being a constructor. The method used to chain promises is called then.

var ajax = function(url, method, data) {
    return new Promise(function (resolve, reject) {
        var xhttp = new XMLHttpRequest(),
            strType = method.toLowerCase(),
            methods = {
                get: function() {
                    var urlParams = serialize(data);
                    xhttp.open("GET", url + urlParams);
                }
            };
        methods[strType]();
        xhttp.send();
        xhttp.onreadystatechange = function() {
            if (this.readyState !== 4) return;
            resolve(this.status == 200 ? this.responseText : this.statusText);
        };
        xhttp.onerror = xhttp.onabort = reject;
    });
};

//Example function call;
ajax('http://httpstat.us/200?sleep=200', 'GET', {
    'Testval': 'testvalue',
    'field': 'value'
}).then(function(response) {
    console.log("Response is:" + response);
}).catch(function() {
    console.log("There was an error or the request was aborted.");
});

function serialize(obj, prefix) {
    var str = [], p;
    for(p in obj) {
        if(obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
            str.push((v !== null && typeof v === "object") ?
                serialize(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return '?' + str.join("&");
};

If you want to use the name success instead of then, you can do the following:

    var promise = new Promise(function (resolve, reject) {
        // ...etc
    });
    promise.success = promise.then;
    promise.error = promise.catch;
    return promise;

:-) Keep in mind that using non-standard method names for promises may not be the best practice. It's recommended to stick with standard promise methods for consistency.

Remaking the functionality of jQuery's $.ajax() method while utilizing the .done() method

Answer №1

Similar questions

Tips for extracting the image URL from my JSON string

NextAuth: JWT callback that returns an object

Issue with useEffect EventListener in REACT HOOKS

Encountering an issue in Laravel when trying to retrieve data using relationships and the paginate() method

Images cascading like a downpour on a canvas (Javascript)

Synchronization-free API and callback functions

Secure JSON data by transmitting it safely to the front end within a Node.js environment

A different component experiences an issue where Angular Promise is returning undefined

Generate a highcharts graph by utilizing AJAX and JSON data

Ways to display numerous cards on individual Carousel slides using react-bootstrap

Method for transmitting JSON array from Controller to View using CodeIgniter

Can Colorbox be configured to load specific sections of a page instead of the entire page?

The presence of a default value within an Angular ControlValueAccessor triggers the dirty state due to

Navigating with Angular and Express

Unable to locate module with React and Material-UI integration

Trouble with feedback form not showing up

Console displaying message of comfort twice - ReactJS

What's the purpose of clicking on the page number before accessing the information?

Iterating through a JSON array using the JQuery .each method

When resetting the function, make sure to move the class to the closest sibling element