Making GET And POST Request Using AXIOS

This content originally appeared on DEV Community and was authored by Aya Bouchiha

Hi, I'm Aya Bouchiha, today, we'll cover sending POST and GET requests in react.js using axios.

Axios

axios: is a popular Javascript library used for making HTTP requests to an API.

docs
github

Why axios instead of fetch?

I recommend reading this article by Faraz Kelhini :

why axios instead of fetch

Axios installation

cdn

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

Or:

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

npm

npm i axios

yarn

yarn add axios

bower

bower install axios

GET request using axios

GET: is a request used for getting or retrieving data or information from a specified server.

Code using then and catch

import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
    useEffect(() => {
        const getTodo = () => {
            axios
                .get('https://jsonplaceholder.typicode.com/todos/1')
                .then((response) => {
                    console.log(response.status);
                    console.log(response.data);
                })
                .catch((e) => console.log('something went wrong :(', e));
        };
        getTodo();
    }, []);
    return <div>GET REQUEST</div>;
};
export default App;

Console

200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}

Code using async and await

import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
    useEffect(() => {
        const getTodo = async () => {
            try {
                const response = await axios.get(
                    'https://jsonplaceholder.typicode.com/todos/1',
                );
                console.log(response.status);
                console.log(response.data);
            } catch (e) {
                console.log('something went wrong :( ', e);
            }
        };
        getTodo();
    }, []);
    return <div>GET REQUEST</div>;
};
export default App;

Console

200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}

POST request using axios

POST: is a request that is used for sending information or data to a specific server.

axios.post(url, data, config)

Code using then and catch

import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
    useEffect(() => {
        const postTodo = () => {
            const data = {
                title: 'drink water',
                body: 'I should drink water',
                userId: 3,
            };
            const headers = { 'header-name': 'value' };
            const config = { headers, };
            axios
                .post(
                    'https://jsonplaceholder.typicode.com/posts',
                    data,
                    config,
                )
                .then((response) => {
                    console.log(response.status);
                    console.log(response.data);
                })
                .catch((e) => console.log('something went wrong :(', e));
        };
        postTodo();
    }, []);
    return <div>POST REQUEST</div>;
};
export default App;

console

201
{title: "drink water", body: "I should drink water", userId: 3, id: 101}

Code using async and await

import { useEffect } from "react";
import axios from "axios";
const App = () => {
  useEffect(() => {
    const postTodo = async () => {
      const data = {
        title: "drink water",
        body: "I should drink water",
        userId: 3
      };
      const headers = { "header-name": "value" };
      const config = { headers, };
      try {
        const response = await axios.post(
          "https://jsonplaceholder.typicode.com/posts",
          data,
          config
        );
        console.log(response.status);
        console.log(response.data);
      } catch (e) {
        console.log("something went wrong!",e);
      }
    };
    postTodo();
  }, []);
  return <div>POST REQUEST</div>;
};
export default App;

console

201
{title: "drink water", body: "I should drink water", userId: 3, id: 101}

Axios

Why axios instead of fetch?

Axios installation

cdn

npm

yarn

bower

GET request using axios

Code using then and catch

Console

Code using async and await

Console

POST request using axios

axios.post(url, data, config)

Code using then and catch

console

Code using async and await

console

References and useful Resources

Suggested Posts

Related Posts