Почему условие 'if' не оценивается в обещании 'then' вызова ajax?

Question

У меня есть вызов ajax, и в конце у меня есть обещание «затем», в котором я вижу, что журнал консоли возвращает false, когда возникает ошибка, но в следующей строке кажется, что условие if не оценивается.

Я прокомментировал условие в приведенном ниже коде как «не оценивается».

Пожалуйста, обратитесь к приведенному ниже коду:

    authenticate(email, password){
            const encodedEmail = encodeURIComponent(email); 
            console.log(encodedEmail);
            axios.get(`http://localhost:8080/api/users/${encodedEmail}`,{
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    Authorization: 'Basic ' + btoa(email + ":" + password)
                }
            })
            .then(function (response) {
                console.log(response);
                sessionStorage.setItem('isAuthenticated', true);
            })
            .catch(function (error) {
                console.log(error);
                sessionStorage.setItem('isAuthenticated', false);
            }).then(() => {
                console.log(sessionStorage.getItem('isAuthenticated')); //returns true as expected
                !sessionStorage.getItem('isAuthenticated') 
               && this.props.history.push("/"); // not evaluated
            });
        }

        handleLogIn(e){
            e.preventDefault();
            const email = e.target.elements.email.value;
            const password = e.target.elements.password.value;
            this.authenticate(email, password);
            this.props.dispatch(addCredentials({email, password}));
        }

Это мой первый в истории проект,пожалуйста помоги!Заранее спасибо.

Answer 1

!sessionStorage.getItem('isAuthenticated') && x будет оценивать x только в том случае, если sessionStorage.getItem('isAuthenticated') достигнет значения falsy (потому что вы используете ! для инвертирования значения при его тестировании)."true" - это не ложное значение, а истинное.

Есть вторая проблема: sessionStorage значения всегда строки , поэтому вы храните "true" и "false", оба из которых являются истинными значениями, а не true и false.

Есть и третья проблема: this в вашем конечном обработчике then не будет ссылаться на то, что выожидая, что он будет ссылаться, вы, вероятно, захотите использовать функцию стрелки (или связанную функцию).Подробнее об этом здесь: http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback

Таким образом, минимальные изменения версии:

1. Преобразование "true" или "false" обратно в true или falseи

2. Избавьтесь от ! при вашем условии

3. Используйте функцию стрелки (или связанную функцию).

Я бы также предложил использовать if, не используя && для побочных эффектов.

Так, например (обратите внимание на функцию стрелки):

.catch((error) => {
    console.log(sessionStorage.getItem('isAuthenticated')); //returns true as expected
    if (sessionStorage.getItem('isAuthenticated') === "true") {
        this.props.history.push("/");
    }
})

Но если это действительно конец цепочки обещаний, правильный способ справиться с этим - просто переместить это в ваш более ранний обработчик then (обратите внимание на функции стрелок):

axios.get(`http://localhost:8080/api/users/${encodedEmail}`,{
    headers: {
        'Access-Control-Allow-Origin': '*',
        Authorization: 'Basic ' + btoa(email + ":" + password)
    }
})
.then((response) => {
    console.log(response);
    sessionStorage.setItem('isAuthenticated', true);
    this.props.history.push("/"); // <==================
})
.catch((error) => { // Doesn't have to be an arrow, but if you relocate any code...
    console.log(error);
    sessionStorage.setItem('isAuthenticated', false);
});

Еслиу вас есть другие вещи, которые вы делаете в этом последнем then, но я бы распространял флаг через цепочку обещаний, а не возвращался к sessionStorage для этого:

axios.get(`http://localhost:8080/api/users/${encodedEmail}`,{
    headers: {
        'Access-Control-Allow-Origin': '*',
        Authorization: 'Basic ' + btoa(email + ":" + password)
    }
})
.then((response) => {
    console.log(response);
    sessionStorage.setItem('isAuthenticated', true);
    return true;
})
.catch((error) => {
    console.log(error);
    sessionStorage.setItem('isAuthenticated', false);
    return false;
})
.then((isAuthenticated) => {
    if (isAuthenticated) {
        this.props.history.push("/");
    } else {
        // do the other thing...
    }
});

...но на самом деле имеет смысл поместить эти две ветви в обработчики then и catch (средний пример), а не распространять флаг.

Answer 2

Если sessionStorage.getItem('isAuthenticated') возвращает значение true, как вы ожидали, то !sessionStorage.getItem('isAuthenticated') в вашем условном обозначении будет оценивать значение false, и поэтому бит после && не будет оцениваться