Achieving Sequential Execution with Axios: A Practical Guide to Promise Chains and async/await

In web development, handling asynchronous operations is a common challenge, especially in scenarios where subsequent validations depend on server responses. This article builds on a practical case study to explore how to achieve sequential execution of HTTP requests using the Axios library, ensuring code logic runs in the expected order (1, 2, 3) rather than asynchronously (1, 3, 2). In the case, a developer using the Vue.js framework needs to check the uniqueness of an alias in a database before saving data, but Axios's asynchronous nature causes validation logic to execute before the server responds, leading to errors.

Problem Analysis and Core Concepts

Axios is a Promise-based HTTP client, where the axios.get() method returns a Promise object. A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. In the original code, the checkUniqueness method initiates a request but does not return the Promise, preventing the save method from waiting for the response. This highlights JavaScript's single-threaded, non-blocking nature: code does not "pause" for asynchronous operations but continues executing subsequent statements. Therefore, controlling execution order requires explicit handling of Promises.

Solution: Utilizing Promise Chains

The best practice is to modify the checkUniqueness method to return the Promise from the Axios call. In the save method, chaining with .then() ensures that other validations execute only after the server response is processed. Refactored code example:

checkUniqueness() {
    return axios.get('/api/unique/alias', {
        params: {
            id: this.id,
            alias: this.alias,
        }
    })
    .then((response) => {
        console.log('2. server response:' + response.data.unique);
        this.valid = response.data.unique;
    });
}

save() {
    this.valid = true;
    console.log('1. before checking');

    this.checkUniqueness()
        .then(() => {
            // Other validation logic, e.g., checking alphanumeric characters, minimum length
            if (this.valid) {
                console.log('3. checked valid, can save now');
                // Perform save operation
            }
        })
        .catch((err) => console.log("Axios error: ", err));
}

This approach uses a Promise chain to guarantee execution order: first logging "1. before checking", then waiting for the server response and logging "2. server response", and finally executing other validations and the save logic in the .then() callback, logging "3. checked valid, can save now". Error handling via .catch() enhances code robustness.

Advanced Optimization: Returning Validation Results

To further improve modularity and readability, the checkUniqueness method can return the validation result instead of directly setting this.valid. This allows the save method to handle all validation results uniformly. Example code:

checkUniqueness() {
    return axios.get('/api/unique/alias', {
        params: {
            id: this.id,
            alias: this.alias,
        }
    })
    .then((response) => {
        console.log('2. server response:' + response.data.unique);
        return response.data.unique; // Return boolean instead of setting variable
    });
}

save() {
    console.log('1. before checking');
    this.checkUniqueness()
        .then((isUnique) => {
            // Integrate other validation logic
            const otherValidations = true; // Assume other validations pass
            if (isUnique && otherValidations) {
                console.log('3. checked valid, can save now');
                // Perform save operation
            }
        })
        .catch((err) => console.log("Axios error: ", err));
}

This pattern centralizes validation logic, facilitating maintenance and testing, while avoiding potential conflicts with global state (e.g., this.valid).

Supplementary Approach: async/await Syntax

As a modern JavaScript feature, async/await offers a more intuitive way to handle asynchronous code, making it appear synchronous. In environments supporting ES6+, the save method can be refactored as an async function, using await to wait for Promise resolution. Example code:

async save() {
    console.log('1. before checking');
    try {
        const isUnique = await this.checkUniqueness(); // Assume checkUniqueness returns Promise<boolean>
        // Other validation logic
        if (isUnique) {
            console.log('3. checked valid, can save now');
            // Perform save operation
        }
    } catch (err) {
        console.log("Axios error: ", err);
    }
}

Note that await can only be used with expressions that return a Promise and must be within an async function. This method simplifies code structure but requires environment compatibility.

Conclusion and Best Practices

The core of achieving sequential execution with Axios lies in leveraging Promise-based asynchronous control flow. Avoid ad-hoc solutions like setTimeout, which rely on hardcoded delays and cannot adapt to network variability. Key steps include: ensuring asynchronous methods return Promises, using .then() chains or async/await to wait for responses, and integrating error handling. These patterns apply not only to alias validation but also extend to scenarios like form submissions and data loading. In practice, choose between Promise chains and async/await based on project needs to enhance code readability and maintainability.