Skip to main content

Axios

Promise based HTTP client for the browser and node.js

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

Refer to official documentation for detailed usage. →

Performing a GET (or POST) request is as simple as calling the method on axios

import axios from "axios";
axios.get('/user?ID=12345')  .then(function (response) {    // handle success    console.log(response);  })  .catch(function (error) {    // handle error    console.log(error);  })  .then(function () {    // always executed  });

More on GET example→

Requests can be made by passing the relevant config to axios.

axios({  method: 'post',  url: '/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});

More on POST example→

Concurrency#

Please use Promise.all to handle concurrency

function getUserAccount() {  return axios.get('/user/12345');}
function getUserPermissions() {  return axios.get('/user/12345/permissions');}
Promise.all([getUserAccount(), getUserPermissions()])  .then(function (results) {    const acct = results[0];    const perm = results[1];  });
caution

Helper functions below for dealing with concurrent requests are deprecated

axios.all(iterable)axios.spread(callback)

Creating an instance#

You can create a new instance of axios with a custom config.

import React, { useState, useEffect } from "react";import axios from "axios";
const BASE_API_URL = "https://official-joke-api.appspot.com/";const API_URL = "/jokes/programming/random";
const jokesApi = axios.create({    baseURL: BASE_API_URL,});
export const AxiosExample = () => {    const [error, setError] = useState(null);    const [isLoaded, setIsLoaded] = useState(false);    const [data, setData] = useState([]);
    useEffect(() => {        jokesApi({            method: "get",            url: API_URL,        })            .then(res => res.data)            .then(res => {                    setData(res);                    setIsLoaded(true);                },                // Note: it's important to handle errors here                // instead of a catch() block so that we don't swallow                // exceptions from actual bugs in components.                err => {                    setIsLoaded(true);                    setError(err);                },            );    }, []);};

More on instance methods→

tip

All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose axios as feature plugin during the project creation phase.

tip

Consider using react-query or swr plugins to handle client-side requests.
They can be used with promise-based methods (fetch, axios..)

Adding axios to your project later#

If you want to add axios to your existing project first install the dependencies

npm install axios