How to get an asynchronous request from the server using Hook useEffect?

Question

Here's how I tried to do it, but it didn't work

    useEffect(() => {
    try {
        const response = async() => {
            await axios.get('https://prectik-87c20-default-rtdb.europe-west1.firebasedatabase.app/quizes.json')}
        console.log(response.data)
    } catch (e) {
        console.log(e);
    }   
})

And so it should look in class components

    async componentDidMount() {
    try {
        const response = await axios.get('https://prectik-87c20-default-rtdb.europe-west1.firebasedatabase.app/quizes.json')}
        
        console.log(response.data)
    } catch (e) {
        console.log(e);
    }
}

Arlle Brasil · Accepted Answer · 2022-04-02 00:53:55Z

1

You are defining your response as a function (that is never used) rather to do a request call . Try to split you request function and the useEffect like this (maybe the useEffect don't permit async functions as its parameter). Maybe this is the correct way to do what you want.

async function request(){
  const response = await axios.get('https://prectik-87c20-default-rtdb.europe-west1.firebasedatabase.app/quizes.json')
  console.log(response.data)
}
useEffect(async () => {
  try {
    request()
  } catch (e) {
     console.log(e);
  }   
})

edited Apr 2, 2022 at 0:53

answered Mar 27, 2022 at 15:58

Arlle Brasil

1762 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yura Oleksiiko Over a year ago

useEffect(async () => {   try {     const response = await axios.get('https://prectik-87c20-default-rtdb.europe-west1.firebasedatabase.app/quizes.json')     console.log(response.data)   } catch (e) {      console.log(e);   }    })

it won't work because you can't write like that link

Blind2k · Accepted Answer · 2022-03-27 15:44:03Z

0

I believe you forgat to use the response to convert it to a useable data

useEffect(() => {
    try {
        const response = async() => {
        await axios.get('https://prectik-87c20-default-rtdb.europe-west1.firebasedatabase.app/quizes.json')}
        const dataUser = await response.json(); //THIS LINE
        console.log(dataUser)
    } catch (e) {
        console.log(e);
    }   
})

And so it should look in class components

async componentDidMount() {
    try {
        const response = await axios.get('https://prectik-87c20-default-rtdb.europe-west1.firebasedatabase.app/quizes.json')}
        const dataUser = await response.json(); //THIS LINE
        console.log(dataUser)
    } catch (e) {
        console.log(e);
    }
}

I got a few examples in this Github repository

answered Mar 27, 2022 at 15:44

Blind2k

3664 silver badges14 bronze badges

2 Comments

Yura Oleksiiko Over a year ago

Maybe you're right that in the class component it looks like this, I just go through the old course on React and there it looks like. I tried your solution, but an error occurred link

Blind2k Over a year ago

I will be happy to try and support. I just need the the error Information.

Arash Ghazi · Accepted Answer · 2022-03-29 06:34:02Z

0

you must define a function and call it after

useEffect(() => {
    const fetchData=async()=>{
    try {
        const response = await axios.get('https://prectik-87c20-default-rtdb.europe-west1.firebasedatabase.app/quizes.json')
        console.log(response.data)
    } catch (e) {
        console.log(e);
    }
  };

  fetchData();
})

edited Mar 29, 2022 at 6:34

answered Mar 27, 2022 at 15:45

Arash Ghazi

1,01112 silver badges18 bronze badges

2 Comments

Yura Oleksiiko Over a year ago

I tried your solution, but still did not get the desired result. That's what happened to me and what was to come out link

Arash Ghazi Over a year ago

I edit the code I had a problem

Collectives™ on Stack Overflow

How to get an asynchronous request from the server using Hook useEffect?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related