Skip to main content

Sending Data

The call function can be used as a generic HTTP utility for performing POST requests with the purpose of sending data to a server endpoint. This function provides flexibility and is adaptable for many use cases where data submission is required (e.g., creating new records, submitting forms, etc.).

Consideration

Backend

class SomeController extends Controller
{
#[Action(method: 'post')]
public function functionName()
{
return [];
}
}

Frontend

import { functionName } from '@actions/SomeController.js';

Function Signature

functionName.call({params = {}, headers = {}, data = {}})

Parameters

  • params (Optional):

    • An object representing query parameters to append to the request URL.
    • Useful for sending additional information or filtering based on dynamic needs.

    Example:

    params: { userId: 123, type: 'admin' }
  • headers (Optional):

    • An object containing the HTTP headers to include in the request.
    • Typically used for passing content type, authentication tokens, or custom headers.

    Example:

    headers: { 
    'Authorization': 'Bearer <token>'
    }
  • data (Optional):

    • The payload to be sent to the server.
    • type: object

    Example:

    data: { 
    name: 'John Doe',
    email: '[email protected]',
    password: 'securePassword123'
    }

Return Value

  • Promise:
    • Resolves to the server's response, which can either be the raw response object, a JSON body, or status metadata based on the API's design.
    • Should be parsed (if needed) for further processing.

Workflow and Behavior

  1. Headers Construction:
  • Merges default headers with custom headers from the caller in the header object
  1. Sending the POST Request:
  • Attaches the data payload to the request.
  1. Processing the Response:
  • Returns the server's response directly or throws errors based on the HTTP status code.
  1. Error Handling:
  • Supports customizable error handling by parsing functionName.errors messages and providing robust exception management.

Example Usage

Example 1: Submitting JSON Data

When working with JSON APIs, include a Content-Type header of application/json and provide the data payload in the data object:

functionName.call({
params: {},
headers: {'Authorization': 'Bearer myToken'},
data: {name: 'Jane Doe', email: '[email protected]'}
}).then(response => {
console.log('Data submitted successfully:', response);
}).catch(error => {
console.error('Failed to submit data:', functionName.errors);
});

Example 2: Submitting File Data

For file uploads, use FormData to package the body content:

const formData = new FormData();

formData.append('file', selectedFile);
formData.append('userId', 123);

functionName.call({
headers: {'Authorization': 'Bearer myToken'},
data: formData
}).then(response => {
console.log('File uploaded successfully:', response);
}).catch(error => {
console.error('Failed to upload file:', functionName.errors);
});