AjaxEvent
A utility to make tracking the status of your AJAX requests easier. Use it with MVC frameworks to reduce the complexity of your View logic.
Overview
10-Second Example
Have you ever wanted to simplify your view logic so it's more self-explanatory? Imagine if your views looked like this (using Angular for example):
Your account is loading... {{ fetchAccountEvent.message }} Your account details: {{ fetchAccountEvent.data }}
Here's the code that could make that happen:
; // Set the internal state to 'executing' while the request is pendingfetchAccountEvent.resetToExecuting; $.ajax;
API Summary
An AjaxEvent
is a chainable object that has the following basic properties:
status
: The current state of your requestmessage
: A string to describe the current state of the request (often used for errors)data
: A simple container that can be used to store the result of the request
These properties can be set as appropriate to make use of the following quick functions:
isSuccessful()
: Check if the request has completed successfullyisExecuting()
: Check if the request is in the middle of being executedisNotExecuting()
: Check if the request is not in the middle of being executedisReady()
: Check if the request has not been executed yethasError()
: Check if the request has encountered an errorhasData()
: Check if the request has completed and has stored data in theAjaxEvent
hasMessage()
: Check if the request has set a message in theAjaxEvent
Usage
Installation
With Yarn do:
yarn add ajax-event
Then in your JS, make the package available:
;
Reacting To Network Requests
Level 1: Ultra-Basic
The simplest example just uses resolve()
and reject()
to set the AjaxEvent
's internal status
:
var someEvent = ; // Perform an AJAX request (example with Promises)getSomeData // Everything went ok // Something went wrong
This will allow you to use AjaxEvent
in your view to show how things are going:
Oops, something went wrong! Try Again Everything is all good!
Level 2: Standard Usage
The AjaxEvent
is also the perfect place to store your response messages and payload data. You can
also re-use the instances multiple times.
// Create a re-usable AjaxEvent instancevar someEvent = ; { // Clear any existing data and messages, and set the internal state to 'executing' someEvent; // Perform an AJAX request (example with Promises) getSomeData;} // Do a network request every 5 seconds;
You can react to when the requests are pending (ie: sent, but not finished):
Loading... Oops, something went wrong: {{ someEvent.message }} The latest data is: {{ someEvent.data }}
Running Tests
Clone this project into your local computer and run the following in its root directory (where the package.json is):
yarn installyarn test
License
Released under the MIT license.
What's New
v3.0.1
Added optional generic type new AjaxEvent<DataT>()
for TS IDE assistance
when working with the data
field, it will now have its shape known if DataT
is provided during construction.
v3.0.0
The data
will no longer be lost when calling resetToExecuting()
, it will persist
until some other command is called.