Axios Tutorial: Get/Post/Put/Delete Request example

Axios is a promise-based HTTP Client Javascript library for Node.js and Browser. In this tutorial, we will create examples that use Axios to make Get/Post/Put/Delete request. The final section shows a simple Axios HTTP Client to interact with Rest API.

Article from BezKoder

Axios Features

Axios can run in the Node.js and Browser with the same codebase.

On the server-side it uses the native Node.js http module
On the client-side (browser) it uses XMLHttpRequests

Additionally, there are important features that you should know:

Supports the Promise API
Intercept request and response (Axios Interceptors tutorial)
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

(from https://github.com/axios/axios#features)

Install Axios

We can add Axios to our project/code with one of following simple ways:

npm install axios

Enter fullscreen modeExit fullscreen mode

bower:

bower install axios

Enter fullscreen modeExit fullscreen mode

yarn:

yarn add axios

Enter fullscreen modeExit fullscreen mode

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Enter fullscreen modeExit fullscreen mode

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Enter fullscreen modeExit fullscreen mode

Axios Response Object schema

The response for a Axios request contains:

data: parsed response body provided by the server
status: HTTP status code
statusText: HTTP status message
headers: HTTP headers (lower case)
config: the request config that was provided to axios
request: the last client request instance that generated this response

For example:

{
  "data": {
    "id": 1,
    "title": "Axios Request",
    "description": "Tut#1 Description",
    "published": true
  },
  "status": 200,
  "statusText": "OK",
  "headers": {
    "content-length": "162",
    "content-type": "application/json; charset=utf-8"
  },
  "config": {
    "url": "/tutorials/1",
    "method": "get",
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "baseURL": "http://localhost:8080/api",
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1
  }
}

Enter fullscreen modeExit fullscreen mode

Axios Response Body

Axios Response Object has data field that contains the parsed response body.
We can use then or await to receive the response body as follows:

axios.get('/bezkoder.com/tutorials')
  .then(function (response) {
    console.log(response.data);
  });

const { data } = await axios.get(url);

Enter fullscreen modeExit fullscreen mode

Axios Error handling

We use catch() for handling errors.

axios.get('/bezkoder.com/tutorials')
  .then(...)
  .catch(function (error) {
    if (error.response) { // get response with a status code not in range 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) { // no response
      console.log(error.request);
      // instance of XMLHttpRequest in the browser
      // instance ofhttp.ClientRequest in node.js
    } else { // Something wrong in setting up the request
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

Enter fullscreen modeExit fullscreen mode

Axios Error handling with async-await

If you want to use async-await, just wrap the axios call with try/catch block.

async function getTutorial() {
  try {
    const response = await axios.get('/bezkoder.com/tutorials');
    console.log(response);
  } catch (error) {
    if (error.response) { // get response with a status code not in range 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) { // no response
      console.log(error.request);
    } else { // Something wrong in setting up the request
      console.log('Error', error.message);
    }
    console.log(error.config);
  }
}

Enter fullscreen modeExit fullscreen mode

Axios GET request

axios.get('/bezkoder.com/tutorials')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Enter fullscreen modeExit fullscreen mode

Async/await:

async function getTutorial() {
  try {
    const response = await axios.get('/bezkoder.com/tutorials');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Enter fullscreen modeExit fullscreen mode

Axios GET with params

You can use the params config option to set query string params.

axios.get(
  '/bezkoder.com/tutorials',
  {
    params: {
      title: 'ios'
    }
  }
);

Enter fullscreen modeExit fullscreen mode

And this is equivalent:

axios.get('/tutorials?title=ios');

Enter fullscreen modeExit fullscreen mode

Axios GET with headers

To send Axios GET request with Headers, we pass an option object with headers property.

axios.get(
  '/bezkoder.com/tutorials',
  {
    headers: {
      'x-access-token': 'token-value'
    }
  }
);

Enter fullscreen modeExit fullscreen mode

Axios GET with params and headers

We can merge params and headers in a Axios GET request like this.

axios.get(
  '/bezkoder.com/tutorials',
  {
    params: {
      title: 'ios'
    },
    headers: {
      'x-access-token': 'token-value'
    }
  }
);

Enter fullscreen modeExit fullscreen mode

Axios POST with body

You can perform an Axios POST object request with body as second parameter.

axios.post(
  '/bezkoder.com/tutorials',
  {
    title: title,
    description: description,
  }
);

Enter fullscreen modeExit fullscreen mode

Axios POST with headers

To send Axios POST request with Headers, we pass an option object with headers property right after the body.

await axios.post(
  '/bezkoder.com/tutorials',
  {
    title: title,
    description: description,
  },
  {
    headers: {
      "x-access-token": "token-value",
    },
  }
);

Enter fullscreen modeExit fullscreen mode

Axios PUT request

You can perform an Axios PUT json object request with body as second parameter.

axios.put(
  '/bezkoder.com/tutorials/42',
  {
    title: title,
    description: description,
    published: true,
  }
);

Enter fullscreen modeExit fullscreen mode

Axios PUT with headers

To send Axios PUT request with Headers, we pass an option object with headers property right after the body.

axios.put(
  '/bezkoder.com/tutorials/42',
  {
    title: title,
    description: description,
    published: true,
  },
  {
    headers: {
      "x-access-token": "token-value",
    },
  }
);

Enter fullscreen modeExit fullscreen mode

Axios DELETE request

axios.delete('/bezkoder.com/tutorials/42');

Enter fullscreen modeExit fullscreen mode

Axios DELETE with headers

To send Axios DELETE request with Headers, we pass an option object with headers property.

axios.delete(
  '/bezkoder.com/tutorials/42',
  {
    headers: {
      "x-access-token": "token-value",
    },
  }
);

Enter fullscreen modeExit fullscreen mode

Create Axios instance

We can create a new instance of axios using axios.create(config) method.


const instance = axios.create({
  baseURL: 'https://bezkoder.com/api/',
  timeout: 2000,
  headers: {'X-Custom-Header': 'bezkoder'}
});

Enter fullscreen modeExit fullscreen mode

Axios Request example with Rest API

We will build a HTTP Client to make CRUD requests to Rest API in that:

Axios GET request: get all Tutorials, get Tutorial by Id, find Tutorial by title
Axios POST request: create new Tutorial
Axios PUT request: update an existing Tutorial
Axios DELETE request: delete a Tutorial, delete all Tutorials

This Axios Client works with the following Web API:

Methods Urls Actions POST /api/tutorials create new Tutorial GET /api/tutorials retrieve all Tutorials GET /api/tutorials/:id retrieve a Tutorial by :id

PUT /api/tutorials/:id update a Tutorial by :id

DELETE /api/tutorials/:id delete a Tutorial by :id

DELETE /api/tutorials delete all Tutorials GET /api/tutorials?title=[keyword] find all Tutorials which title contains keyword

You can find step by step to build a Server like this in one of these posts:

Remember that you need to configure CORS: Access-Control-Allow-Origin: *.
It helps the REST APIs can be accessed by any origin.

Create a Tutorial using axios POST request:

Retrieve all Tutorials using axios GET request:

Retrieve a Tutorial by Id using axios GET request:

Find Tutorials by title using axios GET request with params:

Update a Tutorial using axios PUT request:

Delete Tutorial using axios DELETE request:

Source Code

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Axios Requests example</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container my-3" style="max-width: 600px">
      <h3>Axios Requests example</h3>

      <div class="card mt-3">
        <div class="card-header">Axios GET Request - BezKoder.com</div>
        <div class="card-body">
          <div class="input-group input-group-sm">
            <button class="btn btn-sm btn-primary" onclick="getAllData()">Get All</button>

            <input type="text" id="get-id" class="form-control ml-2" placeholder="Id">
            <div class="input-group-append">
              <button class="btn btn-sm btn-primary" onclick="getDataById()">Get by Id</button>
            </div>

            <input type="text" id="get-title" class="form-control ml-2" placeholder="Title">
            <div class="input-group-append">
              <button class="btn btn-sm btn-primary" onclick="getDataByTitle()">Find By Title</button>
            </div>

            <button class="btn btn-sm btn-warning ml-2" onclick="clearGetOutput()">Clear</button>
          </div>   

          <div id="getResult"></div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-header">Axios POST Request - BezKoder.com</div>
        <div class="card-body">
          <div class="form-group">
            <input type="text" class="form-control" id="post-title" placeholder="Title">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="post-description" placeholder="Description">
          </div>
          <button class="btn btn-sm btn-primary" onclick="postData()">Post Data</button>
          <button class="btn btn-sm btn-warning" onclick="clearPostOutput()">Clear</button>

          <div id="postResult"></div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-header">Axios PUT Request - BezKoder.com</div>
        <div class="card-body">
          <div class="form-group">
            <input type="text" class="form-control" id="put-id" placeholder="Id">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="put-title" placeholder="Title">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="put-description" placeholder="Description">
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="put-published">
            <label class="form-check-label" for="put-published">Publish</label>
          </div>
          <div class="form-group mt-2">
            <button class="btn btn-sm btn-primary" onclick="putData()">Update Data</button>
            <button class="btn btn-sm btn-warning" onclick="clearPutOutput()">Clear</button>
          </div>

          <div id="putResult"></div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-header">Axios DELETE Request - BezKoder.com</div>
        <div class="card-body">
          <div class="input-group input-group-sm">
            <button class="btn btn-sm btn-danger" onclick="deleteAllData()">Delete All</button>

            <input type="text" id="delete-id" class="form-control ml-2" placeholder="Id">
            <div class="input-group-append">
              <button class="btn btn-sm btn-danger" onclick="deleteDataById()">Delete by Id</button>
            </div>

            <button class="btn btn-sm btn-warning ml-2" onclick="clearDeleteOutput()">Clear</button>
          </div>    

          <div id="deleteResult"></div>      
        </div>
      </div>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="main.js"></script>
  </body>
</html>

Enter fullscreen modeExit fullscreen mode

index.html

const instance = axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-Type": "application/json",
  },
});

function htmlizeResponse(res) {
  return `<div class="alert alert-secondary mt-2" role="alert"><pre>` + JSON.stringify(res, null, 2) + "</pre></div>";
}

async function getAllData() {
  let resultElement = document.getElementById("getResult");
  resultElement.innerHTML = "";

  try {
    const res = await instance.get("/tutorials");

    const result = {
      status: res.status + "-" + res.statusText,
      headers: res.headers,
      data: res.data,
    };

    resultElement.innerHTML = htmlizeResponse(result);
  } catch (err) {
    resultElement.innerHTML = htmlizeResponse(err);
  }
}

async function getDataById() {
  let resultElement = document.getElementById("getResult");
  resultElement.innerHTML = "";

  const id = document.getElementById("get-id").value;

  if (id) {
    try {
      const res = await instance.get(`/tutorials/${id}`);

      const result = {
        status: res.status + "-" + res.statusText,
        headers: res.headers,
        data: res.data,
      };

      resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
      resultElement.innerHTML = htmlizeResponse(err);
    }
  }
}

async function getDataByTitle() {
  let resultElement = document.getElementById("getResult");
  resultElement.innerHTML = "";

  const title = document.getElementById("get-title").value;

  if (title) {
    try {
      // const res = await instance.get(`/tutorials?title=${title}`);
      const res = await instance.get("/tutorials", {
        params: {
          title: title
        }
      });

      const result = {
        status: res.status + "-" + res.statusText,
        headers: res.headers,
        data: res.data,
      };

      resultElement.innerHTML = htmlizeResponse(result);
    } catch (err) {
      resultElement.innerHTML = htmlizeResponse(err);
    }
  }
}

async function postData() {
  let resultElement = document.getElementById("postResult");
  resultElement.innerHTML = "";

  const title = document.getElementById("post-title").value;
  const description = document.getElementById("post-description").value;

  try {
    const res = await instance.post("/tutorials", {
      title: title,
      description: description,
    });

    const result = {
      status: res.status + "-" + res.statusText,
      headers: res.headers,
      data: res.data,
    };

    resultElement.innerHTML = htmlizeResponse(result);
  } catch (err) {
    resultElement.innerHTML = htmlizeResponse(err);
  }
}

async function putData() {
  let resultElement = document.getElementById("putResult");
  resultElement.innerHTML = "";

  const id = document.getElementById("put-id").value;
  const title = document.getElementById("put-title").value;
  const description = document.getElementById("put-description").value;
  const published = document.getElementById("put-published").checked;

  try {
    const res = await instance.put(`/tutorials/${id}`, {
      title: title,
      description: description,
      published: published
    });

    const result = {
      status: res.status + "-" + res.statusText,
      headers: res.headers,
      data: res.data,
    };

    resultElement.innerHTML = htmlizeResponse(result);
  } catch (err) {
    resultElement.innerHTML = htmlizeResponse(err);
  }
}

async function deleteAllData() {
  let resultElement = document.getElementById("deleteResult");
  resultElement.innerHTML = "";

  try {
    const res = await instance.delete("/tutorials");

    const result = {
      status: res.status + "-" + res.statusText,
      headers: res.headers,
      data: res.data,
    };

    resultElement.innerHTML = htmlizeResponse(result);
  } catch (err) {
    resultElement.innerHTML = htmlizeResponse(err);
  }
}

async function deleteDataById() {
  let resultElement = document.getElementById("deleteResult");
  resultElement.innerHTML = "";

  const id = document.getElementById("delete-id").value;

  try {
    const res = await instance.delete(`/tutorials/${id}`);

    const result = {
      status: res.status + "-" + res.statusText,
      headers: res.headers,
      data: res.data,
    };

    resultElement.innerHTML = htmlizeResponse(result);
  } catch (err) {
    resultElement.innerHTML = htmlizeResponse(err);
  }
}

function clearGetOutput() {
  document.getElementById("getResult").innerHTML = "";
}

function clearPostOutput() {
  document.getElementById("postResult").innerHTML = "";
}

function clearPutOutput() {
  document.getElementById("putResult").innerHTML = "";
}

function clearDeleteOutput() {
  document.getElementById("deleteResult").innerHTML = "";
}

Enter fullscreen modeExit fullscreen mode

Source: BezKoder

Axios Features

Install Axios

Axios Response Object schema

Axios Response Body

Axios Error handling

Axios Error handling with async-await

Axios GET request

Axios GET with params

Axios GET with headers

Axios GET with params and headers

Axios POST with body

Axios POST with headers

Axios PUT request

Axios PUT with headers

Axios DELETE request

Axios DELETE with headers

Create Axios instance

Axios Request example with Rest API

Source Code

Further Reading

Recommend

全世界推特用户使用率最高emojis表情是？

Install WSL with a single command now available in Windows 10 version 2004 and h...

How to Update or Add a Registry Key Value with PowerShell

How to Write Docs People Read

Episode 007 - AWS Certification Tips with Luc Van Donkersgoed

Safety Assurance Does Not Provide Software Assurance

Marketing to Software Engineers on Twitter Is an Expensive Good Idea

Should I follow Microsoft’s Fluent Design for designing Android apps? | One Dev...

Learn C# with CSharpFritz - A Tour of API Design and Development with Shayne Boy...

Podcast 362: Exploring the cutting edge of privacy and encryption with Very Good...

About Joyk