Looking for a design pattern in JavaScript to manage async requests dealing with success, failure, and retry scenarios?

Question

Looking for a design pattern in JavaScript to manage async requests dealing with success, failure, and retry scenarios?

In the process of developing a mobile application using Appcelerator Titanium, I find myself sending various xhr requests. While this isn't specifically related to Appcelerator Titanium, any code suggestions provided should be in Javascript.

The app requires authentication for certain interactions with the user, among other things.

At this stage, every request may yield different responses such as:

not authenticated
not logged in
invalid parameters
successful
...

These requests are enclosed within different model methods or helpers.

However, since this is new territory for me, I'm curious about the best practices to follow.

For instance, some practical questions include:

If the app lacks authentication (e.g., token expiration), should it attempt authentication and then resend the denied request? (while keeping the process transparent to the user)
Should an authentication request be sent each time the app launches, followed by "forgetting" it?

The issue here is that addressing each request individually leads to lengthy code with nested callbacks, retry logic, event listeners, etc. It doesn't feel efficient or maintainable, as what's necessary is a streamlined approach where any request is checked for errors, rectified automatically if possible (through authentication or automatic login), and retried multiple times before giving up if necessary.

I've heard about the promise pattern but only understand it theoretically, unsure if it aligns with my requirements.

Hence, I would appreciate any guidance on tackling this specific challenge. I'm curious how apps like "Facebook" manage similar scenarios.

Thank you for your assistance.

javascript ajax titanium-mobile

Answer 1

Answer №1

Finding the right approach to working with APIs can be a challenging task, but allow me to share some insights:

One crucial aspect to consider before diving into coding for your application is the API itself. It must be reliable and compliant with standards. A well-designed RESTful API can simplify the complexity of your httpClient operations significantly by responding with standard http status codes and supporting methods like POST, GET, PUT, DELETE...

If you're interested in further reading on this topic, I recommend checking out George Reese's The REST API Design Handbook.

In my experience with Titanium and httpClients, I prefer using a single module that can be loaded via require() as needed. This helps me avoid issues related to multiple simultaneous calls by ensuring only one client operates at a time. Any incoming call is checked against existing ones, and if necessary, added to a queue.

Let me illustrate this approach with a simplified example:

// lib/customClient.js
var xhrRequest;     // HTTPClient instance
var callQueue = []; // Queue for requests

// Method to register a new request
function registerRequest(params) {
    if(!xhrRequest) {
        sendRequest(params);
    } else {
        queueRequest(params);
    }
}

// Queue up a request for later processing
function queueRequest(params) {
    callQueue.push(params);
}

// Send the actual request with provided params from registration
function sendRequest(params) {
    // Implementation details omitted for brevity
}

// Process any pending requests in the queue
function processQueue() {
    xhrRequest = null;
    var nextInQueue = callQueue.shift();
    if(nextInQueue) sendRequest(nextInQueue);
}

// Public API exposed by the module
var publicAPI = {
    sendRequest: function(params) {
        registerRequest(params);
    }
};

module.exports = publicAPI;

You can then make a request from any controller or view in your application:

var customClient = require('lib/customClient');

// Initiate a request
customClient.sendRequest({
    method: 'GET',
    url: 'http://test.com/api/v1/user/1',
    done: function(response) {
        Ti.API.debug(JSON.stringify(response));
    }
});

It's worth noting that this is just a starting point and lacks thorough validation, error handling, connectivity checks, and other essential features. Nonetheless, it serves as a foundation to build upon and refine your understanding of the process.

While there's much more to explore on this subject, I'll conclude here for now...

Answer 2

Finding the right approach to working with APIs can be a challenging task, but allow me to share some insights:

One crucial aspect to consider before diving into coding for your application is the API itself. It must be reliable and compliant with standards. A well-designed RESTful API can simplify the complexity of your httpClient operations significantly by responding with standard http status codes and supporting methods like POST, GET, PUT, DELETE...

If you're interested in further reading on this topic, I recommend checking out George Reese's The REST API Design Handbook.

In my experience with Titanium and httpClients, I prefer using a single module that can be loaded via require() as needed. This helps me avoid issues related to multiple simultaneous calls by ensuring only one client operates at a time. Any incoming call is checked against existing ones, and if necessary, added to a queue.

Let me illustrate this approach with a simplified example:

// lib/customClient.js
var xhrRequest;     // HTTPClient instance
var callQueue = []; // Queue for requests

// Method to register a new request
function registerRequest(params) {
    if(!xhrRequest) {
        sendRequest(params);
    } else {
        queueRequest(params);
    }
}

// Queue up a request for later processing
function queueRequest(params) {
    callQueue.push(params);
}

// Send the actual request with provided params from registration
function sendRequest(params) {
    // Implementation details omitted for brevity
}

// Process any pending requests in the queue
function processQueue() {
    xhrRequest = null;
    var nextInQueue = callQueue.shift();
    if(nextInQueue) sendRequest(nextInQueue);
}

// Public API exposed by the module
var publicAPI = {
    sendRequest: function(params) {
        registerRequest(params);
    }
};

module.exports = publicAPI;

You can then make a request from any controller or view in your application:

var customClient = require('lib/customClient');

// Initiate a request
customClient.sendRequest({
    method: 'GET',
    url: 'http://test.com/api/v1/user/1',
    done: function(response) {
        Ti.API.debug(JSON.stringify(response));
    }
});

It's worth noting that this is just a starting point and lacks thorough validation, error handling, connectivity checks, and other essential features. Nonetheless, it serves as a foundation to build upon and refine your understanding of the process.

While there's much more to explore on this subject, I'll conclude here for now...

Looking for a design pattern in JavaScript to manage async requests dealing with success, failure, and retry scenarios?

Answer №1

Similar questions

Failure in querying with Mongo's $lookup results in an empty array

Bootstrap Thumbnail Grid - dynamic loading with ajax

Show or hide the sibling element of the current element without using a specific identifier in jQuery

The issue with getting a token from Next-auth on the server side persists

What steps can be taken to restrict a user's access to the main page unless they are logged in?

Troubleshooting in ReactJS and NodeJS: Understanding the "Pass --update-binary to reinstall or --build-from-source to recompile" error

Verify the changing text within a Span tag with the use of Selenium in Java

What is the purpose of deserializing the user for every request using PassportJS?

Accessing CouchDB using AngularJS requires users to sign in, with the authentication cookie only being sent to the `/_

Don't give up on the entire task just because one promise was rejected

Tips for connecting multiple queries in Neo4j through the NodeJS driver and combining data into a new property

Use percentages for the width in CSS and pixels for the height, ensuring that both dimensions are equal

Trouble activating header checkbox on initial click

Refrain from using inline JavaScript code within your

Employing the `instanceof` operator on instances generated by constructors from complex npm dependencies

What is the best way to fix the Syntax error that reads "Unexpected token (1:13)"?

The PHP jQuery AJAX request fails to increase the variable's value in the AJAX success function

What is the best way to smoothly transition from one video to another with a simple click?

Submitting incomplete values from a Jquery form to a MySQL database

Enhance and modify data with AngularJS, while also incorporating new information into the