Почему при разном подходе отправки запроса не появляется response в консоли?

Question

[Snooom]

У меня есть два варианта отправки запроса. Сделать функцию в другом файле и экспортировать ее и принимать параметры.
Второй вариант это сразу в компоненте производить отправку при нажатии и при этом подходе я могу получить ответ в консоль, а при первом нет

import axios from "axios";

const request_json = {
    "login": "login",
    "password": "password"
}
axios.post('https://jsonplaceholder.typicode.com/posts', {
    headers: {
        'Content-Type': 'application/json',
    },
    data: request_json
}).then((response) => {
    debugger
    console.log(response)
})

// Вызов экспортированной функции
export async function sendAuthRequest(login, password) {

    const request_json = {
        "login": login,
        "password": password
    }

    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
        headers: {
            'Content-Type': 'application/json',
        },
        data: request_json
    }).then((response) => {
        debugger
        console.log(response)
    })

    const json = await response.json();
    localStorage.setItem('token', json.data.token);
  
}

Компонента где вызывается функция

import { useState } from "react"
import { sendAuthRequest } from "./api";
import axios from "axios";
const Auth = () => {
    const [user, setUser] = useState();
    const [password, setPassword] = useState();
  
    function click() {
        sendAuthRequest(user, password)
        localStorage.setItem('token', 123)
    }
    return (
        <div className="auth">
<form>
                <input value={user} onChange={e => { setUser(e.target.value) }} type="text" className="login" />
    <input value={password} onChange={e => {setPassword(e.target.value)}}  type="password" className="password" />
    <button onClick={click} type="submit">Войти</button>
</form>
        </div>
    )
}

export default Auth

Answer 1

[Михаил Р.]

1. await axios.post().then(), точно правильно?
2. request_json точно в нужном месте axios.post()?

Если попробовать так?

try {
    const res = await axios.post(
        'https://jsonplaceholder.typicode.com/posts',
        JSON.stringify(sendData),
        {
            headers: {'Content-Type': 'application/json'}
        }
    );

    console.log(res.data);

} catch (error) {
    console.error('Error: ', error);
}

onClick на сабмите и без preventDefault, страница перезагрузится и Вы можете не увидеть ответ в консоль.