Fetch API не срабатывает в своей позиции, хотя используется метод async await

Я застрял на проблеме в течение последних нескольких дней. Позвольте мне объяснить проблему. Я только изучаю react и Django rest framework. Поэтому в качестве первого проекта я выбрал приложение todo с аутентификацией JWT. На фронтенде проекта одна из моих функций не работает должным образом.

Я сделал вызов функции getTokenFromRefreshToken для получения маркера доступа по истечении срока действия через сохраненный маркер обновления в виде cookie.

Функция выглядит примерно так :

const getTokenFromRefreshToken = async (token) => {
    console.log("getTokenFromRefreshToken starts.");
    console.log("the token to refetch is : " + token);
    console.log("refetch the token");

    const options = {
        method: 'POST',
        body: `{"refresh":"${token}"}`,
        headers: {
            'Content-Type': 'application/json'
        },
    };

    await fetch('http://127.0.0.1:8000/api/token/refresh/', options)
        .then(response => response.json())
        .then(response => {
            console.log("We get the response from getTokenFromRefreshToken");
            console.log("Set the token variable");
            setToken(response.access);
            console.log("Set the refreshToken variable");
            setRefreshToken(response.refresh);
            console.log("Set the token cookie");
            setCookie('token', response.access);
            console.log("Set the refreshToken variable");
            setCookie('refreshToken', response.refresh);
        })
        .catch(err => console.error(err));
      console.log("getTokenFromRefreshToken ends.");
}

Теперь, когда я вызываю функцию, она не завершает себя после console.log("refetch the token"); этой строки, и, наконец, она завершается после того, как все остальные процессы завершены и все компоненты отрисованы.

Поэтому мои переменные token и refreshToken не могут быть обновлены, и когда я пытаюсь сделать вызов на сервер для других данных, я не могу передать токен, потому что он недействителен. Пожалуйста, помогите мне.

Есть другой код :

useEffect компонента Main App :

useEffect(() => {
    console.log("App component UseEffect Starts");

    if (cookies.previousLogin === "true") {
        console.log("we found previouslogin cookie is true. Now set the userAuthenticatedStatus variable value true.");
        setuserAuthenticatedStatus(true);

        if (cookies.token === undefined) {
            console.log("cookies.token is now undefined");
            console.log("Lets check about the refresh token");
            if (cookies.refreshToken === undefined) {
                console.log("There is also cookies.refreshToken is undefined");
            }
            else {
                console.log("The refresh token in cookie is : ");
                console.log(cookies.refreshToken);
                console.log("So we found cookies.refreshToken now we set the refreshToken variable with cookies.refreshToken");
                setRefreshToken(cookies.refreshToken);
                console.log("Now we need to get the token again using refresh token.");
                getTokenFromRefreshToken(cookies.refreshToken);
                console.log("Token is reloaded from refresh token");
            }
        }
        else {
            console.log("The token in cookie is : ");
            console.log(cookies.token);
            console.log("So we found cookies.token now we set the token variable with cookies.token");
            setToken(cookies.token);
        }
    }
    else {
        console.log("You have not registed or login yet. Please login again.");
    }

    console.log("App component UseEffect ends");
}, []);

Вот моя ссылка на github repo для вашей помощи. ссылка https://github.com/rahulcodepython/todo_full_stackapp

Вернуться на верх