Question

无法读取承诺内未定义的属性“数据”。在一个非常奇怪的地方

2019-07-22

2383

javascript ajax vue.js

我不知道如何调用它。

我的对象中有两个函数：

login: (credentials) => {
    console.log('im in login user');

    axios.post('/api/auth/login', credentials)
            .then(res => {
                console.log(res.data);
                return res.data;
            }).then(
            (toStore) => {
                this.store('hey'); // When I remove this, all OK
            })
            .catch(error => {
                console.log(error.response.data);
                return false;
            })
},

store: (something) => {
    console.log('in user. store');
    // localStorage.setItem(this.storageKey, dataToStore);
},

但是看看 this.store('hey'); 行。当我删除它时，我看不到错误。当我有它时，我遇到了错误。但是错误代表什么 data ？

好的，我找到了问题。 Error 没有 response 属性。我收到错误的原因是...它是一个对象，而不是一个类。当我将对象转换为类时，现在没问题了。

Answer 1

error.response 未定义。这就是您收到“无法读取未定义的‘数据’”的原因。

为了保护自己免受此错误的影响，我会尝试以下代码...

        .catch(error => {
                console.log( (error.response || {}).data );
                return false;
            })

但是，删除 this.store('hey') 后未看到错误的原因是另一个问题。这似乎是范围问题。尝试删除“this”。

Answer 2

问题在于箭头函数中 this 的行为。

如果将 login: (credentials) => { 替换为 login: function (credentials){ ，则 this.store('hey') 应该可以正常工作。

Answer 3

好的，感谢大家，我找到了代码中的所有错误。有两个：

error.response 未定义（没有这样的属性）。正确的行应该是 console.log(error); 。
此外，由于箭头函数行为（范围问题），登录函数无法看到我的 store 函数。

事实上，我在第二个 then 语句中得到了错误 #2，因此导致我的程序进入 catch 语句，其中是错误 #1。