Axios Development Rules
8/15/2025
These rules cover various aspects of using Axios in development. It includes code organization, such as directory structure and naming conventions. It also details common patterns, performance optimization, security best - practices, testing approaches, and more. Avoid hard - coding URLs, handle errors gracefully, and use asynchronous functions for better code quality.
### 1. Code Organization and Structure:
- **Directory Structure Best Practices**:
- Create an `api` or `services` directory to house all API-related code.
- Organize API modules based on resources or features (e.g., `api/users.js`, `api/products.js`).
- Separate Axios instance configuration into a dedicated file (e.g., `api/axios-config.js`).
- **File Naming Conventions**:
- Use descriptive names for API modules (e.g., `userApi.js`, `productService.js`).
- Follow a consistent naming convention (e.g., camelCase for variables, PascalCase for components).
- **Module Organization**:
- Export individual API functions from each module (e.g., `getUser`, `createUser`).
- Use named exports for better code readability and maintainability.
- **Component Architecture**:
- Create reusable components for handling data fetching and display.
- Decouple components from specific API calls to improve reusability.
- Utilize custom hooks to encapsulate data fetching logic.
- **Code Splitting Strategies**:
- Implement lazy loading for API modules that are not immediately required.
- Use dynamic imports to load modules on demand.
- Consider route-based code splitting for larger applications.
### 2. Common Patterns and Anti-patterns:
- **Design Patterns Specific to Axios**:
- **Singleton Pattern**: Use a singleton pattern for the Axios instance to ensure a single configuration across the application.
- **Adapter Pattern**: Create an adapter layer to transform API responses into a consistent format.
- **Factory Pattern**: Use a factory pattern to create different Axios instances with specific configurations.
- **Recommended Approaches for Common Tasks**:
- **Authentication**: Use request interceptors to add authentication headers (e.g., JWT tokens).
- **Error Handling**: Implement a centralized error handling function to log errors and display user-friendly messages.
- **Data Transformation**: Use response interceptors to transform data before it reaches the components.
- **Anti-patterns and Code Smells to Avoid**:
- **Hardcoding URLs**: Avoid hardcoding API endpoints directly in the code.
- **Duplicated Request Logic**: Don't repeat API request logic across multiple components.
- **Ignoring Errors**: Never ignore errors returned by Axios; always handle them appropriately.
- **State Management Best Practices**:
- Use a state management library (e.g., Redux, Zustand, Recoil) to manage API data.
- Store API responses in a normalized format to improve performance.
- Utilize selectors to derive data from the store efficiently.
- **Error Handling Patterns**:
- Implement a global error boundary to catch unexpected errors.
- Display user-friendly error messages based on the error type.
- Log errors to a central logging service for monitoring and debugging.
### 3. Performance Considerations:
- **Optimization Techniques**:
- **Caching**: Implement caching mechanisms to avoid redundant API calls.
- **Request Debouncing**: Debounce frequent API requests to reduce server load.
- **Request Cancellation**: Cancel pending requests when the component unmounts or the user navigates away.
- **Memory Management**:
- Clear Axios instances when they are no longer needed.
- Avoid creating unnecessary Axios instances.
- **Rendering Optimization**:
- Use memoization techniques to prevent unnecessary re-renders.
- Implement pagination or virtualized lists for large datasets.
- **Bundle Size Optimization**:
- Use tree shaking to remove unused code from the Axios library.
- Minify and compress the JavaScript bundle.
- **Lazy Loading Strategies**:
- Lazy load API modules that are not immediately required.
- Use dynamic imports to load modules on demand.
### 4. Security Best Practices:
- **Common Vulnerabilities and How to Prevent Them**:
- **Cross-Site Scripting (XSS)**: Sanitize user input to prevent XSS attacks.
- **Cross-Site Request Forgery (CSRF)**: Implement CSRF protection mechanisms.
- **Man-in-the-Middle (MITM) Attacks**: Use HTTPS to encrypt communication between the client and the server.
- **Input Validation**:
- Validate user input on both the client and server sides.
- Use appropriate validation libraries to prevent injection attacks.
- **Authentication and Authorization Patterns**:
- Use a secure authentication protocol (e.g., OAuth 2.0, OpenID Connect).
- Implement role-based access control (RBAC) to restrict access to sensitive data.
- **Data Protection Strategies**:
- Encrypt sensitive data at rest and in transit.
- Use appropriate data masking techniques to protect sensitive information.
- **Secure API Communication**:
- Use HTTPS for all API communication.
- Implement rate limiting to prevent abuse.
- Monitor API traffic for suspicious activity.
### 5. Testing Approaches:
- **Unit Testing Strategies**:
- Mock Axios requests using libraries like `axios-mock-adapter` or `nock`.
- Test individual API functions in isolation.
- Verify that requests are made with the correct parameters and headers.
- **Integration Testing**:
- Test the interaction between API modules and components.
- Verify that data is fetched and displayed correctly.
- Use a testing framework like Jest or Mocha.
- **End-to-End Testing**:
- Test the entire application workflow from the user's perspective.
- Use a testing framework like Cypress or Selenium.
- **Test Organization**:
- Organize tests by module or feature.
- Use descriptive names for test cases.
- Follow a consistent testing style.
- **Mocking and Stubbing**:
- Use mocking to isolate components from external dependencies.
- Use stubbing to replace API responses with predefined data.
### 6. Common Pitfalls and Gotchas:
- **Frequent Mistakes Developers Make**:
- Forgetting to handle errors.
- Using incorrect HTTP methods.
- Hardcoding URLs.
- Not setting appropriate headers.
- **Edge Cases to Be Aware Of**:
- Network errors.
- Server downtime.
- Rate limiting.
- API versioning.
- **Version-Specific Issues**:
- Be aware of breaking changes between Axios versions.
- Consult the Axios documentation for specific version information.
- **Compatibility Concerns**:
- Ensure that Axios is compatible with the target browsers and environments.
- Use polyfills if necessary.
- **Debugging Strategies**:
- Use the browser's developer tools to inspect network requests.
- Log Axios requests and responses to the console.
- Use a debugging tool like VS Code's debugger.
### 7. Tooling and Environment:
- **Recommended Development Tools**:
- VS Code with the ESLint and Prettier extensions.
- Axios DevTools for Chrome and Firefox.
- Postman or Insomnia for testing API endpoints.
- **Build Configuration**:
- Use a build tool like Webpack or Parcel to bundle the application.
- Configure the build tool to optimize the bundle size.
- **Linting and Formatting**:
- Use ESLint with a consistent set of rules to enforce code quality.
- Use Prettier to format the code automatically.
- **Deployment Best Practices**:
- Deploy the application to a secure hosting environment.
- Configure HTTPS for all API communication.
- Monitor the application for errors and performance issues.
- **CI/CD Integration**:
- Integrate automated testing and deployment into the CI/CD pipeline.
- Use a CI/CD tool like Jenkins, GitLab CI, or CircleCI.