Newer Version Available

This content describes an older version of this product. View Latest

Abortable Actions

You can mark an action as abortable to make it potentially abortable while it's queued to be sent to the server or not yet returned from the server. This is useful for actions that you'd like to abort when there is a newer abortable action in the queue. We recommend that you only use abortable actions for read-only operations as they are not guaranteed to be sent to the server.

A set of actions for a single transaction, such as a click callback, are queued together to be sent to the server. If a user starts another transaction, for example by clicking another navigation item, all abortable actions are removed from the queue. The aborted actions are not sent to the server and their state is set to ABORTED.

An abortable action is sent to the server and executed normally unless it hasn’t returned from the server when a subsequent abortable action is added to the queue.

If some actions have been sent but not yet returned from the server, they will complete, but only the callback logic associated with the ABORTED state (action.getState() === "ABORTED") will be executed. This enables components to optionally log a message or clean up if they had an aborted action.

There is no requirement that the most recent abortable action has to be identical to the previous abortable actions. The most recent action just has to be marked as abortable.

Note

Marking an Action as Abortable

Mark a server-side action as abortable by using the setAbortable() method on the Action object in JavaScript. For example:

setCallback() has a third parameter that registers the action state that will invoke the callback. If you don't specify the third argument for setCallback(), it defaults to registering the SUCCESS and ERROR states.To check for aborted actions in your callback and take appropriate action, such as logging the aborted action, call setCallback() with the ABORTED state set explicitly in the third argument. For example:

Rapid Clicking

Imagine a navigation menu where each action is a potentially slow request to the server. A user may click on several navigation items quickly so that none of the server responses return before the subsequent click. If all the actions are marked as abortable, none of the callbacks will be called except for the last click. This improves user experience by avoiding flickering due to sequential rendering of multiple server responses.

Progressive Loading

Sometimes, you might want to do a progressive loading of data where the first set of items is loaded, followed by subsequent data loads after the rendering of the first set is complete. You can do this by calling a second set of actions after a delay, and using the setParentAction() method in the Action object to associate each action in the second set with one of the actions in the first set. This ensures that the second set of actions will abort if the user navigates away.