Получение ошибок при попытке передать функцию в axios.then и перехватить

Question

axios.post('http://localhost:3000/api/v1/login', {
                email: this.state.email,
                password: this.state.password
            }, {
                    headers: {
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Credentials": true,
                        "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT,DELETE",
                        "Access-Control-Allow-Headers": "",
                    }
                })
                .then(function (response) { this.onloginSuccess(response) })
                .catch(function (error) { this.onLoginFail(error)});

У меня есть этот аксиос, который должен обрабатывать ответ, подобный следующему:

onloginSuccess = (response) => {
        console.log(response)
        this.setState({
            buttonDisable: false
        });

        sessionStorage.setItem('uuid', response.value.data.uuid)
        sessionStorage.setItem('bearertoken', response.value.data.bearertoken)


        this.props.history.push({ pathname: '/dashboard' })
    }

И ошибка, подобная следующей:

onloginFail = (error) => {
        NotificationManager.error(error.response.data.message, 'Error!', 5000);
        this.setState({
            buttonDisable: false
        });
    }

Я сохраняюследующие ошибки:

Uncaught (in promise) TypeError: Cannot read property 'onLoginFail' of undefined
    at eval (index.js?8a7d:95)

и когда я удаляю onLoginFail, я получаю

index.js?8a7d:94 Uncaught (in promise) TypeError: Cannot read property 'onloginSuccess' of undefined
    at eval (index.js?8a7d:94)

Answer 1

.then(function (response) { this.onloginSuccess(response) })

Измените его на функцию стрелки.

.then((response) => this.onloginSuccess(response))

Обычные функции получают значение this в зависимости от того, как они были вызваны.Функция вызывается без определенного контекста, поэтому this устанавливается для объекта окна (в нестрогом режиме) или не определено (в строгом режиме, в котором вы находитесь).С другой стороны, функции со стрелками получают значение this от того места, где они определены, и поэтому this будет равняться тому же значению, которое имело значение во время вызова axios.post.

В качестве альтернативы, поскольку onLoginSuccessсама функция стрелки, и параметры уже в правильном порядке, вы можете просто передать ссылку на onLoginSuccess:

.then(this.onloginSuccess)