Javascript 在提交下一个变异之前处理api响应

创建Vue应用程序时，我调用requestUserProfile操作。我的目标是从

“/api/user/”

获取api调用，并将数据设置为调用setUserProfile之前的状态

这里的问题是，在我得到api响应之后，甚至在我将数据设置为状态之前，setUserProfile就会被调用。在触发setUserProfile之前是否可以完全执行requestUserInfo

这是我正在使用的代码：

state() {
    return {
        requestUser: null,
        profile: null
    }
},
mutations: {
    setUserInfo (state) {
        apiService("/api/user/")
        .then(data => {
            state.requestUser = data["username"]
        })
    },
    setUserProfile (state) {
        let endpoint = "api/profile/";

        if (state.requestUser) {
            apiService(endpoint)
            .then(data => {
                state.profile = data
            })
        }
    }
},
actions: {
    async requestUserInfo ({ commit }) {
        commit('setUserInfo')
    },
    async requestUserProfile ({ dispatch, commit }) {
        await dispatch('requestUserInfo') // wait for `requestUserInfo` to finish
        commit('setUserProfile')
    }
},

---

你似乎误解了突变和行动的目的。突变不能是异步的，只能修改状态。与之相反，操作可以是异步的，可以请求一些数据，之后可以使用突变将这些数据置于一种状态

因此，总体而言，您的代码应该如下所示：

mutations: {
  setUserInfo (state, username) {
    state.requestUser = username
  },
  setUserProfile (state, profile) {
    state.profile = profile
  }
...
actions: {
  async requestUserInfo ({ commit }) {
     const data = await apiService("/api/user/")
     commit('setUserInfo', data["username"])
  },
  async requestUserProfile ({ dispatch, commit, state }) {
      await dispatch('requestUserInfo') // wait for `requestUserInfo` to finish
      let endpoint = "api/profile/";
      if (state.requestUser) {
        const data = await apiService(endpoint)
        commit('setUserProfile', data)
      }
  }