如何从 Axios 响应 Vuex 的操作中调用操作？

Question

我正在尝试实现以下逻辑：调用登录，然后如果响应正常，则调用检索用户数据的方法。

登录操作

loginUser({commit,dispatch}, credentials) {
            const form = new URLSearchParams();
            form.append("login", credentials.login);
            form.append("password", credentials.password);

            const formConfig = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            };

         return  Axios.post(loginUrl, form, formConfig).then(
                (response) => {
                    commit('setErrorMessage', '', {root: true});
                    commit('setAuthenticated', response.headers[authorization]);
                    dispatch('getUserByLoginAuth',credentials.login);
                },
                (error) => {
                    if (error.response.status===500){
                        commit('setErrorMessage', error.response.data.message, {root: true});
                    } else {
                        commit('setErrorMessage', error.response.data, {root: true});
                    }

                });

        },

从上面派发的第二个动作：

getUserByLoginAuth({commit, getters}, login) {
            return getters.authenticatedAxios.get(userUrl + '/find', {
                params: {
                    login: login
                }
            }).then(
                (response) => {
                    commit('setErrorMessage', '', {root: true});
                    commit('setUser', response.data);
                },
                (error) => {
                    commit('setErrorMessage', error.response.data, {root: true});
                });
        },

仅从第二次调用此操作（据我了解，它与承诺有关）。

这是一个发送登录操作的组件代码

this.$store.dispatch('loginUser', this.credentials).then(() => {
                    this.errorMessage = this.getError;
                    if (this.errorMessage.length) {
                        this.errorOccurred = true;

                    }
                    this.$router.push({path: '/user/' + this.getId});
                });
                this.errorOccurred = false;
            },

我也不确定我是否在正确的位置进行路由。据我了解，然后将使用 getUser 的承诺，因此登录时的 errorMessage 可能会丢失。我想阻止它并从第一次正确发送 getUser

Answer 1

我不完全按照你的要求，但这似乎是一个问题：

dispatch('getUserByLoginAuth',credentials.login);

问题不在于调用本身。问题是它启动了一个新的异步操作，而没有将其链接到现有的 Promise 上。从loginUser的角度来看，一切都做好了，就不会等getUserByLoginAuth了。

结果将是组件中的then 将在getUserByLoginAuth 完成之前被调用。我想这就是为什么它似乎第二次起作用的原因，因为它正在从上一次调用中获取相关数据。

解决办法就是把它改成：

return dispatch('getUserByLoginAuth',credentials.login);

通过放入return，它会将其添加到承诺链中，因此在getUserByLoginAuth 完成之前，loginUser 不会被视为完成。