# Data Fetching
No.JS makes HTTP requests declarative — just add attributes to HTML elements.
## Base URL
Set once on any ancestor element. All descendant `get`, `post`, etc. resolve relative URLs against it.
```html
...
...
```
Override for specific sections:
```html
...
```
Absolute URLs skip base resolution:
```html
...
```
### Programmatic Configuration
```html
```
> **Note:** `retries` applies to 5xx server errors and network failures. Client errors (4xx) are not retried.
### Per-Request Headers
```html
```
---
## `get` — Fetch and Render Data
```html
```
### Attributes
| Attribute | Type | Description |
|-----------|------|-------------|
| `get` | `string` | URL to fetch (GET request) |
| `as` | `string` | Name to assign the response in the context. Default: `"data"` |
| `loading` | `string` | Template ID to show while loading (e.g. `"#skeleton"`) |
| `error` | `string` | Template ID to show on fetch error (e.g. `"#errorTpl"`) |
| `empty` | `string` | Template ID to show when response is empty array/null |
| `refresh` | `number` | Auto-refresh interval in ms (polling) |
| `cached` | `boolean\|string` | Cache responses. `cached` = memory, `cached="local"` = localStorage, `cached="session"` = sessionStorage |
| `into` | `string` | Write response to a named global store |
| `debounce` | `number` | Debounce in ms (useful with reactive URLs) |
| `headers` | `string` | JSON string of additional headers |
| `params` | `string` | Expression that resolves to query params object |
| `skeleton` | `string` | ID of a DOM element to show while loading and hide when done |
### Full Example
```html
Loading users...
Failed to load:
No users found.
```
### Reactive URLs
URLs that reference state variables re-fetch automatically when those values change:
```html
...
```
### URL Interpolation and Encoding
> ⚠️ **Breaking change (v1.10):** Values inside `{…}` placeholders are encoded with `encodeURIComponent`. This means `/` is encoded as `%2F`, which is correct for **query-string values** but will break **path segments** that intentionally contain slashes.
>
> ```html
>
>
...
>
>
>
...
>
>
>
...
>
>
>
...
> ```
---
## `post`, `put`, `patch`, `delete` — Mutating Requests
Used on forms or triggered via `call`.
> **Tip:** The `call` directive now supports the same attributes as form-based HTTP directives — including `loading`, `headers`, `redirect`, and `body`. See [Actions & Refs → `call`](actions-refs.md) for full details.
### Form Submission
```html
Welcome, !
```
### PUT / PATCH / DELETE
```html
```
### Mutation Attributes
| Attribute | Description |
|-----------|-------------|
| `post`, `put`, `patch`, `delete` | URL for the request |
| `body` | Request body (JSON string with interpolation). For forms, auto-serializes fields |
| `success` | Template ID to render on success. Receives response as `var` |
| `error` | Template ID to render on error. Receives error as `var` |
| `loading` | Template ID to show during request |
| `confirm` | Show browser `confirm()` dialog before sending |
| `redirect` | URL to navigate to on success (SPA route) |
| `then` | Expression to execute on success (e.g. `"users.push(result)"`) |
| `into` | Write response to a named global store |
| `cached` | Cache responses (memory/local/session) |
### Request Lifecycle
```
[idle] → [loading] → [success | error]
↓ ↓
render tpl render tpl
exec `then` log to console
`redirect`
```
---
## Skeleton Placeholders (`skeleton=`)
The `skeleton` attribute keeps a pre-rendered placeholder element visible while
a request is in flight, then hides it once the response arrives. This prevents
Cumulative Layout Shift (CLS) — the page holds its shape during loading instead
of collapsing and re-expanding.
```html
```
The skeleton is hidden automatically when:
- The response arrives (success)
- A cached response is used
- The response is empty (before rendering the `empty=` template)
- The request fails (before rendering the `error=` template)
### Combined with `loading=`
`skeleton=` and `loading=` serve different purposes and can be used together:
| | `skeleton=` | `loading=` |
|---|---|---|
| Content | Pre-rendered element already in the DOM | Template cloned into the fetch element |
| Visibility | Shown before JS, hidden after response | Injected by JS, replaced after response |
| CLS impact | None — space is already reserved | May cause layout shift |
| SSG-friendly | Yes | No |
```html
```
### Skeleton element visibility
The skeleton element (`id="skeleton"`) should start **visible** in the HTML
(no `display: none` in CSS). `_hideSkeleton` sets `display: none` as an
inline style, and `_showSkeleton` removes that inline style. If the
skeleton has `display: none` in a CSS rule, removing the inline style will
reveal the CSS `display: none` again — effectively keeping it hidden.
Start the skeleton visible and let No.JS control its visibility:
```html
…placeholder…
…placeholder…
```
### Accessibility
Consider adding `aria-busy="true"` on the fetch container while the request
is in progress and `aria-hidden="true"` on the skeleton element when it is
hidden. These attributes are not injected automatically in the current release.
---
## Interceptors
Interceptors hook into the fetch pipeline to modify requests, inspect responses, or short-circuit the entire flow. They support async functions and have a 5-second timeout per interceptor.
### Basic Usage
```html
```
### Async Interceptors
Interceptor functions can be async. Each interceptor is given a 5-second timeout — if it does not resolve within that window, it is skipped with a warning and the chain continues.
```html
```
### Cancelling Requests with `NoJS.CANCEL`
Return an object keyed by `NoJS.CANCEL` from a request interceptor to abort the fetch. The request throws an `AbortError`, which triggers the element's `error` template if one is set.
```html
```
### Serving Cached Responses with `NoJS.RESPOND`
Return an object keyed by `NoJS.RESPOND` from a request interceptor to skip the HTTP call entirely and return the value directly as the response data.
```html
```
### Replacing Response Data with `NoJS.REPLACE`
Return an object keyed by `NoJS.REPLACE` from a response interceptor to replace the parsed response body with custom data.
```html
```
### Header Redaction
By default, interceptors receive redacted copies of requests and responses. Sensitive headers (`Authorization`, `Cookie`, `X-API-Key`, `X-CSRF-Token`, etc.) are stripped from the options object before it reaches untrusted interceptors, and sensitive response headers (`Set-Cookie`, `WWW-Authenticate`, etc.) are removed from the response proxy. URL query parameters matching patterns like `token`, `key`, `secret`, `auth`, `password`, or `credential` are replaced with `[REDACTED]`.
Plugins installed with `{ trusted: true }` via `NoJS.use()` receive the full, unredacted request and response objects. See [Plugins → Trusted Interceptors](plugins.md#trusted-interceptors) for details.
### Sentinel Summary
| Sentinel | Interceptor Type | Effect |
| -------- | ---------------- | ------ |
| `NoJS.CANCEL` | Request | Aborts the request (`AbortError`) |
| `NoJS.RESPOND` | Request | Returns data directly, no HTTP call |
| `NoJS.REPLACE` | Response | Replaces the parsed response body |
---
## See Also
- [Actions & Refs](actions-refs.md) — `call` directive for click-triggered requests
- [State Management](state-management.md) — `into` for writing responses to stores
- [Configuration](configuration.md) — global API settings, CSRF, interceptors
- [Error Handling](error-handling.md) — per-element and global error handling
---
**Previous:** [Head Management ←](head-management.md) | **Next:** [Data Binding →](data-binding.md)