jBase-2/wiki/HTTP-Requests.md

• get | getText | post | upload

---

.get

Description Performs an asynchronous HTTP GET request. This method assumes the response is JSON and will automatically parse it. Includes an automatic timeout of 5000ms to avoid hanging requests.

Parameters

• url (String): A string containing the URL to which the request is sent.
• option (RequestInit, optional): An optional RequestInit object to customize the fetch request (e.g., custom headers, mode). The method is strictly enforced as 'GET'.

Returns

• (Promise): A Promise that resolves with the parsed JSON data or rejects with an error.

Example

$.http.get('[https://api.example.com/users](https://api.example.com/users)')
    .then(data => {
        console.log('Users loaded:', data);
    })
    .catch(err => {
        console.error('Error loading users:', err);
    });

---

.getText

Description Performs an asynchronous HTTP GET request. This method expects a raw text or HTML response and does not attempt to parse it as JSON. Ideal for loading HTML templates (Server-Side Rendering Partials) or config files. Includes an automatic timeout of 5000ms.

Parameters

• url (String): A string containing the URL to which the request is sent.
• option (RequestInit, optional): An optional RequestInit object to customize the fetch request. The method is strictly enforced as 'GET'.

Returns

• (Promise): A Promise that resolves with the raw string data.

Example

$.http.getText('/partials/footer.html')
    .then(html => {
        $('#footer-container').html(html);
    });

---

.post

Description Performs an asynchronous HTTP POST request to submit data to a server. The body is automatically stringified to JSON, and the Content-Type is set to application/json. Includes an automatic timeout of 5000ms.

Parameters

• url (String): A string containing the URL to which the request is sent.
• body (Any, optional): The data to send to the server (automatically JSON serialized). Defaults to {}.
• option (RequestInit, optional): An optional RequestInit object to customize the fetch request. The method is strictly enforced as 'POST'.

Returns

• (Promise): A Promise that resolves with the server's response (parsed as JSON).

Example

const payload = {
    username: 'jdoe',
    email: 'john@example.com'
};

$.http.post('/api/register', payload)
    .then(response => {
        if (response.success) {
            console.log('User registered!');
        }
    })
    .catch(err => {
        console.error('Registration failed:', err);
    });

---

.upload

Description Performs a multipart/form-data upload with precise progress tracking. It uses XMLHttpRequest under the hood because the native fetch API lacks upload progress support.

It seamlessly accepts either a single File object (which is automatically wrapped for you) or a pre-populated FormData object (ideal for multi-file uploads and adding extra fields).

Parameters

• url (String): The target endpoint.
• data (FormData | File): The data to upload. If a single File is provided, jBase automatically wraps it in a FormData object under the key 'file'.
• onProgress (Function, optional): A callback function that triggers repeatedly during the upload.
  • percentage (Number): The rounded progress percentage (0-100).
  • loaded (Number): The amount of bytes loaded so far.
  • total (Number): The total amount of bytes to upload.

Returns

• (Promise): A Promise resolving to the parsed JSON response (or plain text if parsing fails).

Examples

1. Single File Upload with a UI Progress Bar

// Grab a file from an input field
const file = $('#file-input').prop('files')[0];

if (file) {
    try {
        // Upload with real-time progress tracking
        const response = await $.http.upload('/api/media/upload', file, (pct, loaded, total) => {
            console.log(`Uploading: ${pct}%`);
            
            // Update a custom progress bar using jBase CSS chaining
            $('.upload-progress-bar').css('width', pct + '%');
        });

        console.log('Upload successful!', response);
    } catch (error) {
        console.error('Upload failed:', error.message);
    }
}

2. Multi-File Upload using FormData

const fileInput = $('#gallery-upload')[0];

if (fileInput && fileInput.files.length > 0) {
    const formData = new FormData();

    // Append all selected files to the FormData object.
    // The '[]' in the key tells the server to expect an array of files.
    $.each(fileInput.files, (index, file) => {
        formData.append('images[]', file);
    });

    // You can also append regular text fields!
    formData.append('albumId', '12345');

    // Upload the entire FormData object
    await $.http.upload('/api/gallery', formData, (percentage) => {
        console.log(`Total Upload Progress: ${percentage}%`);
    });
}