javascript - 即使在 SUCCESS 之后，React 也会执行 PROMISE 的 CATCH 语句

Question

我通常是一名 Angular 开发人员，并且正在从事 React 工作。如果这个问题看起来很简单，请原谅。

我有一个简单的 promise

    return axios(`team/${this.state.teamId}/player`, this.state)
        .then((response) => {
            console.log('formSubmit success');

            this.store.dispatch({
                type:       constants.PLAYER_UPDATE,
                payload:    response.data.user,
            });
            return false;

        })
        .catch((error) => {
            console.error('Error', error.response.data);
            this.setState({
                saveStatus: error.response.data.message
            });
            return Promise.reject(error)
        });

在网络选项卡中，我可以看到该 URL 已正常提取。此外 store.dispatch 被调用，因为它被打印在控制台中。

但同时它正在调用 catch 语句中的代码。我的控制台输出是

formSubmit success                    Player.js:127
Store BEFORE | PLAYER_UPDATE          Store.js:76

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
at Player.js:135

当一切都成功时，为什么它会在 CATCH() 之后呢？我什至在 this.store.dispatch

的末尾添加了 return 语句

请帮忙。

Answer 1

catch 函数会捕获 then 中出现的任何错误，如果你只想捕获 promise 中的错误，你可能需要使用第二个回调在 then 函数中。你应该这样做:

return axios.get(`endpoint`)
   .then(successCallback, errorCallback);

或者，在你的情况下，

return axios(`team/${this.state.teamId}/player`, this.state)
        .then((response) => {
            console.log('formSubmit success');

            this.store.dispatch({
                type:       constants.PLAYER_UPDATE,
                payload:    response.data.user,
            });
            return false;

        }, (error) => {
            console.error('Error', error.response.data);
            this.setState({
                saveStatus: error.response.data.message
            });
            return Promise.reject(error)
        });