Home > Enterprise >  How to integrate axios api in react js with async and await using react hooks
How to integrate axios api in react js with async and await using react hooks

Time:03-30

I have the following code in signin.js and I am using Axios API to integrate it with the code so that it redirects to the dashboard. I have the following URL for API (https://9d6e-110-44-127-177.ngrok.io/auth/login/) and email that is verified is "[email protected]" and password is admin@123 but I don't know how to integrate with the code. The code for signin.jsx is as below: signin.jsx

import React, {useState} from 'react'
import styled from 'styled-components'
import StyledInput from './StyledInput'
import StyledButton from './StyledButton'
import { Link } from 'react-router-dom'
import './Signin.css'
import axios from 'axios'


const Container = styled.div`

display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
height: 80vh;
width: 30vw;
background: #E8E8E8;

`;

const Welcome = styled.h2`
  
   margin: 3rem 0 2rem 0;
   box-sizing: border-box;
   background-color: #00009c;
   border: 2px solid #00009c;
   border-radius: 2rem;
   padding: 15px;
   text-transform: uppercase;
   color: white;
   letter-spacing: 0.4rem;
`;

const Form = styled.form`
width: 100%;
  height: 100vh;
  
  justify-content: center;
  align-items: flex-start;
`;



const Input = styled.div`
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height:20%;
width: 100%;
` ;

const Button = styled.div`
margin: 1rem 0 2rem 0;
width: 90%;
display: flex;
align-items: center;
justify-content: center;

`;

const Paragraph = styled.p`
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
`;

const Check = styled.input`
font-size: 15px;
margin-left: -400px;
box-sizing: border-box;
`;

const Label = styled.label`
margin-top: -120px;
margin-left: -270px;

`;




const Signin = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const  handleSubmit = (e) => {
        e.preventDefault()
        axios.post("https://9d6e-110-44-127-177.ngrok.io/auth/login/", {
            email: "[email protected]",
            password: "admin@123"
        })
            .await((response) => {
                console.log(response)
                
                
            })
        
            .catch((err) => {
                console.log(err)
                alert(err.response.data.error.message)
         })
    }

   const handleEmail = (e) => {
        setEmail(e.target.value)
    }

  const  handlePassword = (e) => {
        setPassword(e.target.value)
    }
    
        
    
    return (
        <Container>
            <Welcome>
                Welcome
            </Welcome>
            <Form onSubmit= {handleSubmit}>
         
                <Input>
                    <StyledInput type="email"
                        placeholder="Email"
                        required
                        value={email}
                        onChange = {handleEmail}
                    />
                </Input>
              
               
                <Input>
                    <StyledInput type="password"
                        placeholder="Password"
                        required
                        value={password}
                        onChange = {handlePassword} />
                </Input>
                <Input>
                    <Check type="checkbox" />
                    <Label>Remember me</Label>
                </Input>
                 <Link to = "dashboard">
                <Button onLink = {handleSubmit}>
                    <StyledButton content = "Log in" />
                    </Button>
                    </Link>
                <Paragraph>
                Don't have an account?
                <Link to = "register">Sign up</Link>
            </Paragraph>
            </Form>
           

        </Container>
    );
            
}

export default Signin

I also want to use async await in the sign in. How can that be done?

CodePudding user response:

   .await((response) => { // not await, it should be then
       console.log(response)
   })

should be "then" instead

.then((response) => {
     console.log(response)
})

CodePudding user response:

Here is how you use async await which is more readable.

 const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      let response = await axios.post(
        "https://9d6e-110-44-127-177.ngrok.io/auth/login/",
        {
          email: "[email protected]",
          password: "admin@123",
        }
      );
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  };

CodePudding user response:

import React, {useState} from 'react'
import styled from 'styled-components'
import StyledInput from './StyledInput'
import StyledButton from './StyledButton'
import { Link } from 'react-router-dom'
import './Signin.css'
import axios from 'axios'


const Signin = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const  handleSubmit = async () => {
        e.preventDefault()
        await axios.post("https://9d6e-110-44-127-177.ngrok.io/auth/login/", {
          email : email,
          password : password
        }).then((res) => {
           if(res.data.email === "[email protected]" && res.data.password === "admin@123")
        }).catch((err) => {
              console.log(err) ;
         })
    }

   const handleEmail = (e) => {
        setEmail(e.target.value)
    }

  const  handlePassword = (e) => {
        setPassword(e.target.value)
    }
    
        
    
    return (
        <Container>
            <Welcome>
                Welcome
            </Welcome>
            <Form onSubmit= {handleSubmit}>
         
                <Input>
                    <StyledInput type="email"
                        placeholder="Email"
                        required
                        value={email}
                        onChange = {handleEmail}
                    />
                </Input>
              
               
                <Input>
                    <StyledInput type="password"
                        placeholder="Password"
                        required
                        value={password}
                        onChange = {handlePassword} />
                </Input>
                <Input>
                    <Check type="checkbox" />
                    <Label>Remember me</Label>
                </Input>
                 <Link to = "dashboard">
                <Button onLink = {handleSubmit}>
                    <StyledButton content = "Log in" />
                    </Button>
                    </Link>
                <Paragraph>
                Don't have an account?
                <Link to = "register">Sign up</Link>
            </Paragraph>
            </Form>
           

        </Container>
    );
            
}

export default Signin
  • Related