typescript - pass Axios response from server to client - Stack Overflow

admin管理员组

文章数量:1202038

I am trying to use axios to login and passing back the response but the somehow the response is always undefined.

const handleLogin = async (
  e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
  e.preventDefault();
  await Login(email, password).then((response) => {
    console.log('response' + response);
    router.push('/profile');
  });
};

server code

await axios
  .post(
    'http://127.0.0.1:3333/auth/signin',
    { email: email, password: password },
    { headers: { 'content-type': 'application/x-www-form-urlencoded' } },
  )
  .then((response) => {
    const accessToken = response.data.accessToken || '';
    const refreshToken = response.data.refreshToken || '';
    // localStorage.setItem('access_token', accessToken);
    // localStorage.setItem('refresh_token', refreshToken);
    if (accessToken != '' && refreshToken != '') {
      cookies().set('access_token', accessToken);
      cookies().set('refresh_token', refreshToken);
      console.log('Authenticated successfully:', response.data);
    }
    return response.data;
  })
  .catch((error) => {
    console.error('Authentication failed:', error);
    return { props: error };
  });

I am trying to use axios to login and passing back the response but the somehow the response is always undefined.

const handleLogin = async (
  e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
  e.preventDefault();
  await Login(email, password).then((response) => {
    console.log('response' + response);
    router.push('/profile');
  });
};

server code

await axios
  .post(
    'http://127.0.0.1:3333/auth/signin',
    { email: email, password: password },
    { headers: { 'content-type': 'application/x-www-form-urlencoded' } },
  )
  .then((response) => {
    const accessToken = response.data.accessToken || '';
    const refreshToken = response.data.refreshToken || '';
    // localStorage.setItem('access_token', accessToken);
    // localStorage.setItem('refresh_token', refreshToken);
    if (accessToken != '' && refreshToken != '') {
      cookies().set('access_token', accessToken);
      cookies().set('refresh_token', refreshToken);
      console.log('Authenticated successfully:', response.data);
    }
    return response.data;
  })
  .catch((error) => {
    console.error('Authentication failed:', error);
    return { props: error };
  });

• typescript
• next.js

Share Improve this question Follow edited Jan 21 at 22:05 Phil 165k2525 gold badges259259 silver badges267267 bronze badges asked Jan 21 at 18:36 user1688346user1688346 1,97055 gold badges2626 silver badges4949 bronze badges 1

• 1 Don't mix await with .then() / .catch(). It only leads to confusing code and incorrect return values – Phil Commented Jan 21 at 22:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Update your code to use async await correctly. You're mixing with it with .then/catch.

Here is your code updated by using async await correctly, you should be able to see your response data now. Also for error handling try/catch is a nice way to handle errors with async await.

const handleLogin = async (
  e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
  e.preventDefault();
  const response = await Login(email, password)
   console.log('response' + response);
   router.push('/profile');
};

  try {
    const response = await axios.post(
      'http://127.0.0.1:3333/auth/signin',
      { email: email, password: password },
      { headers: { 'content-type': 'application/x-www-form-urlencoded' } },
    );

    const accessToken = response.data.accessToken || '';
    const refreshToken = response.data.refreshToken || '';
    // localStorage.setItem('access_token', accessToken);
    // localStorage.setItem('refresh_token', refreshToken);
    if (accessToken !== '' && refreshToken !== '') {
      cookies().set('access_token', accessToken);
      cookies().set('refresh_token', refreshToken);
      console.log('Authenticated successfully:', response.data);
    }
    return response.data;
  } catch (error) {
    console.error('Authentication failed:', error);
    return { props: error };
  }

本文标签： typescriptpass Axios response from server to clientStack Overflow