Vuex中如何等待modifyResults回调完成后再调用updateResults接口

问题根因 #

你当前遇到的执行顺序异常，核心原因是functionOne属于回调风格的异步函数，你在它前面加的await只会等待functionOne本身的执行完成，不会等待你传入的回调函数functionTwo的执行逻辑，因此才会出现functionOne执行完就马上触发updateResults，之后才执行functionTwo的情况。

解决方案 #

第一步：修改api.js中的modifyResults方法

将回调逻辑手动包裹为Promise，确保整个方法的Promise会等到functionTwo执行完成后再变更状态：

export const modifyResults = () => {
  // 手动包裹Promise，等待回调内全部逻辑执行完成再resolve
  return new Promise(async (resolve, reject) => {
    try {
      await functionOne({someApi},
        async functionTwo(status, response) => {
          try {
            const { data } = await api.post(/* 其余业务逻辑 */);
            // 回调逻辑执行完成后resolve整个Promise
            resolve(data);
          } catch (err) {
            // 回调内报错向外抛出
            reject(err);
          }
        }
      )
    } catch (err) {
      // functionOne本身执行报错向外抛出
      reject(err);
    }
  })
};
export const updateResults = async () => {
  // 其余原有逻辑保留
};

第二步：优化Vuex action逻辑

dispatch调用异步action本身返回Promise，建议补充await保证后续逻辑执行顺序可控：

import {modifyResults, updateResults} from './api';
const actions = {
  async modifyResults({ dispatch }) {
    try {
      await modifyResults();
      // 异步action的dispatch前加await，保证执行顺序
      await dispatch('updateResults');
    } catch (error) {
      // 原有错误捕获逻辑保留
    } finally {
      // loading变量设为false
    }
  },
  async updateResults({ dispatch }, ) {
    try {
      const { sources } = await updateResults();
      await dispatch('setItems', sources);
    } 
    // 其余原有逻辑保留
  },
}

修改后modifyResults返回的Promise会等到functionTwo内的所有异步逻辑执行完成后才会变为完成状态，因此Vuex中await modifyResults()会阻塞到functionTwo执行完毕，再触发后续的updateResults，即可达到你期望的执行顺序。

内容的提问来源于stack exchange，提问作者seyet