Dynamic Application API

api()

async

Provides an interface for making HTTP requests and processing their responses.

Accepts an optional object with the following properties:

Property

Type

Description

url

string

Specifies the URL of the resource for the request.
The URL can be relative or absolute.

method

string

Request method, e.g., "GET", "POST", "PUT", "PATCH", "DELETE", "HEAD".

headers

object

An object containing the headers for the request.

body

object
string
number
DOM element

The request body.
If a DOM element is provided, it must be a form.
The form's data will be automatically converted into a request object.

format

string

The format for receiving data from the request, e.g., "json", "text", "blob", "formData", "arrayBuffer".
If the format is not specified, it is determined automatically.

cache

number
string

The cache mode for the request, which can be one of the following options:

Option

Description

number

Specifies the caching time for the request and response in seconds.
This caching approach enables the application to function even without an internet connection.
If "0" is specified, caching will be disabled.

'default'

The browser will use the cache if possible, falling back to the network if necessary.
This is the default value unless specified otherwise.

'reload'

Forces the browser to fetch the data from the network, bypassing the cache entirely.
It ignores any cached data, even if it exists.

'no-cache'

The browser will check the cache for the response but will always revalidate the data with the server before using it.
This ensures the cached response is not stale.

'no-store'

This mode instructs the browser not to store any part of the request or response in the cache.
The data is fetched directly from the network, and no cached data is used.

'force-cache'

The browser will always use the cached version of the data if available, even if it's outdated.
It only fetches from the network if the data is not cached.

'only-if-cached'

The browser will only use the cached data and will not attempt to fetch from the network, even if the cache is expired or not available.
If the cache is not present, it will result in an error.

mode

string

The request mode, which can be one of the following options:

Option

Description

'cors'

This mode allows cross-origin requests, meaning requests can be made to a different domain than the one serving the page.
The server must include appropriate CORS (Cross-Origin Resource Sharing) headers to allow this request.
If these headers are not present, the request will be blocked by the browser.

'no-cors'

This mode allows requests to a different domain, but restricts access to response data.
Only limited information, such as the status code, can be accessed, and the response body is unreadable unless the server permits it via CORS headers.

'same-origin'

This mode restricts requests to the same origin as the document, meaning the request can only be made to the same domain, protocol, and port.
Requests to other origins are blocked.

credentials

string

The credentials for the request, which can be one of the following options:

Option

Description

'omit'

No credentials (such as cookies) are sent with the request.

'same-origin'

Credentials are sent only if the request is to the same origin as the document.

'include'

Credentials are sent with the request, regardless of the origin.

redirect

string

The redirect mode for the request, which can be one of the following options:

Option

Description

'follow'

Automatically follows redirects.
This is the default value.

'error'

Interrupts the request and throws an error if a redirect occurs.

'manual'

Allows manual control over redirects.
When a redirect occurs, the response will contain the redirect status, but the request will not automatically follow the redirect.
The redirect URL can be accessed from the "Location" header and handled as needed.

referrer

string

The referrer for the request, which can be one of the following options:

Option

Description

'client'

The referrer is automatically determined by the browser, typically the URL of the page making the request.
This is the default value.

'no-referrer'

No referrer information is sent with the request.

URL

A specific URL is sent as the referrer for the request.

referrerPolicy

string

The referrerPolicy for the request, which can be one of the following options:

Option

Description

'no-referrer'

No referrer information is sent with the request.

'no-referrer-when-downgrade'

Referrer is sent only if the request is made to the same origin or a more secure protocol (HTTPS).
If the request is made to a less secure protocol (HTTP), no referrer is sent.
This is the default value in many browsers.

'origin'

Only the origin (scheme, host, and port) of the referring document is sent as the referrer.

'origin-when-cross-origin'

Sends the full referrer to the same origin, but only the origin when the request is cross-origin.

'unsafe-url'

Sends the full URL (including path, query, and fragment) as the referrer for both same-origin and cross-origin requests, even when the request is made over HTTP.

integrity

string

Contains the subresource integrity (SRI) value for the request, used to verify that the fetched resource has not been tampered with.
It is usually represented as a hash value (e.g., "sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=") that the browser can compare against the fetched resource to ensure its integrity.

keepalive

string

This option can be used to allow the request to "persist" after the page is unloaded, ensuring the request is completed even if the page is closed or navigated away from.
This is particularly useful for sending data or performing actions in the background, such as sending analytics data or making cleanup requests when the user leaves the page.

signal

string

An instance of the AbortSignal object, which allows communication with the request and, if necessary, aborting it using the abort() method.
This is useful if the request needs to be canceled, for example, if it is no longer required or takes too long to complete.

All properties are optional.
The "url", "method", and "format" properties are taken from the "api" property of the "config.js" configuration file if they are not specified.
A token can be set or overwritten with a new one for subsequent requests if the server's response contains a JSON string with the "token" property.
The token assigned by the server will automatically be included in the "Authorization" header of each request, following the format: {Authorization: 'Bearer token'}.
If custom headers are included in the request, the "Authorization" header will be automatically added if the token has been set.
If a custom "Authorization" header is specified in the request, it will be sent, but the server-set header will not be overwritten.
For subsequent requests that do not include an "Authorization" header, the token previously set by the server will be used.
Supports sending files both directly from forms and from a specified object, without requiring the explicit use of "multipart/form-data" in the headers or the "enctype" attribute of the form.
Returns the response data in the specified format.
Returns the data as an object if the format is "json" or unspecified and conversion is possible; otherwise, returns it as a string.
Returns false if the request fails.

Example:

// The request data will be taken from the configuration object.
await api();

// The basic request with data provided in the body.
// The "Authorization" header will be added automatically if the server has previously set a token.
await api({body: 'getBook'});
await api({body: {method: 'getBook', id: 1}});

// Sending form data, including files, from within the component.
await api({
   method: 'POST',
   body: e.form
});

// The request that includes additional options.
// The specified "Authorization" header will be used.
await api({
   url: '/api',
   method: 'POST',
   headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Cache-Control': 'no-cache',
      'Authorization': 'Bearer 8q2jLiT13fxDYAe2tJllusRSZ273h2'
   },
   body: {
      method: 'getBook',
      id: 1
   },
   format: 'json',
   cache: 30
});

// The GraphQL-based request.
await api({
   url: '/graphql',
   method: 'POST',
   headers: {'Content-Type': 'application/json'},
   body: {query: `
      query {
         users {
            id
            name
         }
      }
   `}
});

Previous css.in() Next content()