GET request with axios (using await) returning undefined-CodePudding

I'm using axios to get data and then handle 401 error and so far it works, but there is a problem when I try to import my axios function and use it I got undefiend but not the actual response. Btw I have seen simillar questions and didn't find answear.

axios function code

import axios from 'axios';

const stateFetch = async (user, id) => { 
  console.log("in function stateFetch");
  axios.defaults.headers.common = {'Authorization': `bearer ${user.json.token}`}
  await axios.get(`/api/name/blogs/${id}/validate`);
}

axios.interceptors.response.use(response => {
  console.log(response);
  return response;
}, error => {
  console.log(error.response);
if (error.response.status === 401) {
   return "user is not authorized to edit this blog";
}
return error;
});

export default stateFetch;

the fetching part

const fetchState = async () => {
            //chek if client is authenticated to edit the blog
            console.log("fetchState");
            try {
                const response = await stateFetch(user, id);
                console.log(response);
                if (!response.ok) {
                    throw Error(response);
                }
                setState(response);
            } catch (error) {
                console.log(error);
                if (error.message === "user is not authorized to edit this blog")
                {
                    console.log("user is not authorized to edit this blog");
                    setState({state: "false"});
                    return;
                }
                setError(error);
            }
        }

what I get on console picker of console log sory for picture

CodePudding user response：

As you do not have explicit return from async function, stateFetch returns undefined

const stateFetch = async (user, id) => { 
  console.log("in function stateFetch");
  axios.defaults.headers.common = {'Authorization': `bearer ${user.json.token}`}
  await axios.get(`/api/name/blogs/${id}/validate`);
  // return undefined
}

just add return

const stateFetch = async (user, id) => { 
  console.log("in function stateFetch");
  axios.defaults.headers.common = {'Authorization': `bearer ${user.json.token}`}
  return await axios.get(`/api/name/blogs/${id}/validate`);
}

CodePudding user response：

You should return the response from stateFetch function. Just add the return keyword as here

const stateFetch = async (user, id) => { 
  console.log("in function stateFetch");
  axios.defaults.headers.common = {'Authorization': `bearer ${user.json.token}`}
  return await axios.get(`/api/name/blogs/${id}/validate`);
}

CodePudding user response：

Remeber to add the domain name/ip For example:

const stateFetch = async (user, id) => { 
  console.log("in function stateFetch");
  axios.defaults.headers.common = {'Authorization': `bearer ${user.json.token}`}

return await axios.get(http://localhost:3000/api/name/blogs/${id}/validate); }