Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 15, 2021 11:04 pm GMT

Making GET And POST Request Using AXIOS

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.

Why axios instead of fetch?

I recommend reading this article by Faraz Kelhini :

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}

References and useful Resources

Suggested Posts

To Contact Me:

Happy codding!


Original Link: https://dev.to/ayabouchiha/making-get-and-post-request-using-axios-7g8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To