PacemFetchElement is the predefined custom element that handles the asynchronous http communication with the server side of your application.

It basically wraps the fetch API.

Requests

PacemFetchElement sends a request as soon as autofetch is true (default) and:

• A url property/attribute is provided and...
• it is not disabled.

Then, it will wait for one of the following properties to change in order to trigger a new request:

• url: the target url,
• method: the case-insensitive HTTP method,
• parameters: the key-value pairs to be sent in the body/querystring of the request,
• headers: the key-value pairs to be sent in the header of the request,
• as: the type of expected response ("object"/json, "text"/string, "blob", "image"),
• type: possible values are "json" (default) or "raw" for application/x-www-form-urlencoded content-types,
• mode: possible values are "cors" (default), "no-cors"/string, "navigate", "same-origin",
• credentials: possible values are "same-origin" (default), "omit", "include",
• disabled (in the case it changes to true).

Calling the method fetch() always triggers a new request as well (if not disabled, of course).

While a response is awaited, the fetching flag is set to true (and emits relevant propertychange event).

A couple of tricky flags

• autofetch flag property (default: true), tells if a new request should be made if any of the above properties change their values.

If autofetch is set to false then you manually need to call fetch() method.

• diffByValues flag property (default: false), gives more control on autofetch-ing process specially in case of parameters or headers changes.

Since parameters and headers are complex objects, they can bring the exact same values but trigger the fetch anyway if the very underlying instance reference has changed (default behavior).
If you're cheap on networking then set diffByValues to true and both parameters and headers will be diffed only by their values and not by their instance tokens.

Responses

When a response is obtained, the fetching flag is set to false (and emits...).

Once the response has been successfully returned:

• success custom event is fired (having the response itself as detail).

Once the response body has been parsed into the expected entity:

• result property value is set consequently,
• fetchresult custom event is fired (having the entity as detail).

Results type hints can be given to the fetcher by setting the as property (above).

If anything went wrong:

• error custom event is fired (having the response itself as detail).