Asynchronous requests in Laravel with Inertia.js and Vue 3 - what's best

Almost all application development on Laravel using Inertia.js and Vue 3 is based on asynchronous requests. This approach ensures modern user interaction with the application and avoids page reloads.

The principle of asynchronous requests can be described as follows:

• event - The user initiates an interaction (for example, by clicking a button or filling out a form).
• Calling the request function - In response to an event, a function is called that sends an asynchronous request to the server.
• Contacting the controller - The request is processed on the server in the controller Laravel.
• Returning a response to the client - The server returns data that is displayed on the client without reloading the page.

When it comes to implementing such interaction, developers are often faced with a choice between Inertia's built-in functionality.js, the axios library, and the fetch API. Let's look at each of these approaches.

1. Usage Inertia.js

Inertia.js provides a convenient API for working with queries in the context of single-page applications (SPA). It combines server and client code, allowing you to easily send requests and receive responses using methods such as Inertia.post() or Inertia.get(). It is important to note that Inertia also allows you to process responses through promises, which makes it possible to conveniently manage successful and erroneous responses.

Advantages Inertia.js

• Automatic interface update: When sending Inertia requests.js automatically processes changes and refreshes the page.
• Intuitive API: Using Inertia.js allows you to get rid of unnecessary code related to state management and routing.
• Consistency with MVC: Easy integration with Laravel controllers and Vue frameworks.

Usage example Inertia.js

import { Inertia } from '@inertiajs/inertia';

// Function for submitting the form
function submitForm(data) {
    return new Promise((resolve, reject) => {
        Inertia.post('/submit-form', data, {
            onSuccess: (response) => {
                resolve(response);
            },
            onError: (error) => {
                reject(error);
            },
        });
    });
}

2. Using Axios

axios is a popular JavaScript library for executing HTTP requests. It provides more control over the configuration of requests and response processing, which can be useful in more complex scenarios.

Advantages of axios

• Flexibility and power: Allows you to customize headers, parameters, and process responses in more detail.
• Compatibility with RESTful API: It is easy to work with various APIs, which makes it ideal for applications with extensive functionality.
• Promise support: An easy-to-use promise-based API that allows you to manage asynchronous requests conveniently.

An example of using Axios

import axios from 'axios';

// Function for submitting the form
function submitForm(data) {
    axios.post('/submit-form', data)
        .then(response => {
            console.log('Form submitted successfully:', response.data);
        })
        .catch(error => {
            console.error('Error submitting form:', error);
        });
}

3. Using Fetch

fetch is a built-in API for executing HTTP requests that offers a modern and user-friendly syntax. It allows you to access resources in any format and provides the ability to work with promises, which simplifies the processing of asynchronous operations.

Advantages of Fetch

• Modern syntax: A simple and intuitive way to perform queries.
• Asynchronous support/expected syntax: Convenient to use with async/await for cleaner code.
• Flexibility: It is easy to configure parameters and request headers.

Example of using Fetch

async function submitForm(data) {
    try {
        const response = await fetch('/submit-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        const responseData = await response.json();
        console.log('Form submitted successfully:', responseData);
    } catch (error) {
        console.error('Error submitting form:', error);
    }
}

The question is which approach is better to use to perform asynchronous queries in Laravel applications using Inertia.js and Vue 3, has multiple answers.

• If you are developing a SPA-oriented application and want to keep integration simple and routing-friendly, choose Inertia.js .
• If you need more control over requests and you need to interact with multiple external APIs, consider using axios.
• If you need a simple and modern approach without additional libraries, use the built-in fetch API.

Each of these tools has its advantages and disadvantages, and your choice should meet the specific requirements and architecture of your application.