{
    "slug": "js_axios_patterns",
    "term": "Axios — HTTP Client for PHP APIs",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "Axios is a promise-based HTTP client with interceptors, automatic JSON parsing, and CSRF token injection — common in Laravel and Symfony frontends.",
    "long": "Laravel includes axios pre-configured: axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest' and automatic CSRF token from meta tag. Interceptors enable global error handling, token refresh, and request logging. Axios automatically parses JSON responses (unlike fetch which requires .json()). CancelToken (deprecated; use AbortController now). axios.create() for multiple API clients with different base URLs.",
    "aliases": [
        "Axios",
        "axios.get",
        "axios.post",
        "HTTP client JS"
    ],
    "tags": [
        "javascript",
        "http",
        "php-integration"
    ],
    "misconception": "Axios is more secure than fetch — both are equally secure; Axios is more convenient (auto-JSON, interceptors) but fetch is now equally capable with better browser primitives like AbortController.",
    "why_it_matters": "Laravel and Symfony ship with Axios pre-configured for CSRF — understanding Axios interceptors enables centralised token refresh and error handling across all API calls.",
    "common_mistakes": [
        "Using CancelToken (deprecated) instead of AbortController signal",
        "Not handling 401 token refresh in interceptors",
        "Mixing axios instances with different base URLs without create()"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_fetch_api",
        "js_ajax_patterns",
        "js_csrf_fetch",
        "js_abort_controller"
    ],
    "prerequisites": [
        "js_promises",
        "js_async_await",
        "js_fetch_api"
    ],
    "refs": [
        "https://axios-http.com/docs/intro"
    ],
    "bad_code": "// No error handling, no CSRF on non-Laravel setup:\naxios.post('/api/save', data)\n    .then(res => console.log(res.data));",
    "good_code": "// Central axios instance with interceptors:\nconst api = axios.create({ baseURL: '/api', timeout: 10000 });\n\n// CSRF token injection:\napi.defaults.headers.common['X-CSRF-Token'] =\n    document.querySelector('meta[name=csrf-token]')?.content;\n\n// Response error interceptor:\napi.interceptors.response.use(\n    res => res,\n    async err => {\n        if (err.response?.status === 401) await refreshToken();\n        return Promise.reject(err);\n    }\n);\n\nawait api.post('/save', data); // auto JSON + CSRF + error handling",
    "quick_fix": "Use axios.create() with a base URL and interceptors for centralised CSRF, auth, and error handling",
    "severity": "medium",
    "effort": "medium",
    "created": "2026-03-17",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_axios_patterns",
        "html_url": "https://codeclaritylab.com/glossary/js_axios_patterns",
        "json_url": "https://codeclaritylab.com/glossary/js_axios_patterns.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Axios — HTTP Client for PHP APIs](https://codeclaritylab.com/glossary/js_axios_patterns) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_axios_patterns"
            }
        }
    }
}