DEV Community

Cover image for Axios Tutorial: Get/Post/Put/Delete Request example
Tien Nguyen
Tien Nguyen

Posted on • Edited on

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

#todayilearned #webdev #javascript #axios

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.

Related Post:

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: ```bash

npm install axios

 - bower: ```bash bower install axios
Enter fullscreen mode Exit fullscreen mode
  • yarn: ```bash

yarn add axios

 - CDN: ```html <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Or:

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Enter fullscreen mode Exit 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 mode Exit 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 mode Exit 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 mode Exit 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 mode Exit 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 mode Exit 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 mode Exit 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 mode Exit fullscreen mode

And this is equivalent:

 axios.get('/tutorials?title=ios');
Enter fullscreen mode Exit 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 mode Exit 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 mode Exit 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 mode Exit 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 mode Exit 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 mode Exit 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 mode Exit fullscreen mode

Axios DELETE request

 axios.delete('/bezkoder.com/tutorials/42');
Enter fullscreen mode Exit 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 mode Exit 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 mode Exit 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

axios-request-example-get-post-put-delete

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:

axios-post-request-example

  • Retrieve all Tutorials using axios GET request:

axios-get-request-example

  • Retrieve a Tutorial by Id using axios GET request:

axios-get-request-example-by-id

  • Find Tutorials by title using axios GET request with params:

axios-get-request-params-example

  • Update a Tutorial using axios PUT request:

axios-put-request-example

  • Delete Tutorial using axios DELETE request:

axios-delete-request-example

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/bootstrap@4.6.0/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 mode Exit 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 mode Exit fullscreen mode

Source: BezKoder

With this Axios tutorial, you've known many ways to make GET/POST/PUT/DELETE request using Axios (with headers, params, body...). You can also use it in:

Further Reading

Top comments (0)