Vue.js中如何用Promise替代setTimeout结合Vuex获取PDF

首先先修正Vuex代码里的语法错误：

修正后的Vuex模块代码 #

const documentUrlBuilder = new DocumentUrlBuilder()

const document = {
  namespaced: true, // 修正赋值语法错误
  state: () => ({
    pdf: {
      repository: 'medscareInc',
      url: null,
      pdfId: null // 假设这是存储pdfId的字段
    }
  }),
  mutations: {
    updateDocumentUrl(state, url) {
      state.pdf.url = url
    },
    setPdfId(state, id) { // 新增mutation用于设置pdfId
      state.pdf.pdfId = id
    }
  },
  actions: {
    // 修正参数语法错误
    async fetchPdfFile({commit, state}, pdfId) {
      const response = await documentUrlBuilder.getDocumentById(
        state.pdf.repository,
        pdfId
      );
      commit('updateDocumentUrl', response.url);
    },
    // 假设这是获取pdfId的异步action，返回Promise
    async loadPdfId({commit}) {
      const res = await someApiCall(); // 替换为实际获取pdfId的请求
      commit('setPdfId', res.pdfId);
      return res.pdfId; // 返回Promise，resolve结果为pdfId
    }
  }
}

组件中用Promise实现的两种可靠方式 #

方式1：监听pdfId的状态变化（推荐） #

利用Vue的watch监听另一个模块的pdfId，当它变为有效值时立即调用fetchPdfFile，彻底替代不可靠的定时器：

<script>
import { mapActions, mapState } from 'vuex'

export default {
  computed: {
    ...mapState('document', { // 映射document模块的state
      pdfId: state => state.pdf.pdfId
    }),
    pdfUrl() {
      return this.$store.state.pdfs.pdf.url
    },
  },
  watch: {
    // 当pdfId从null变为有效值时触发
    pdfId(newId) {
      if (newId) {
        // fetchPdfFile本身是async函数，自动返回Promise
        this.fetchPdfFile(newId)
          .then(() => {
            console.log('PDF URL已更新');
            // 这里可以执行打开模态框等后续操作
          })
          .catch(err => {
            console.error('加载PDF失败', err);
          });
      }
    }
  },
  mounted() {
    // 如果mounted时pdfId已经存在，手动触发一次
    if (this.pdfId) {
      this.fetchPdfFile(this.pdfId);
    }
  },
  methods: {
    ...mapActions('pdfs', {
      fetchPdfFile: 'fetchPdfFile',
    }),
    ...mapActions('document', { // 映射获取pdfId的action
      loadPdfId: 'loadPdfId'
    })
  }
}
</script>

方式2：等待获取pdfId的Promise完成 #

如果pdfId是通过某个异步action获取的，直接在mounted中等待该Promise完成后调用fetchPdfFile：

<script>
import { mapActions } from 'vuex'

export default {
  computed: {
    pdfUrl() {
      return this.$store.state.pdfs.pdf.url
    },
  },
  async mounted() {
    try {
      // 等待pdfId加载完成，await直接拿到结果
      const pdfId = await this.loadPdfId();
      // 再调用fetchPdfFile加载PDF链接
      await this.fetchPdfFile(pdfId);
      console.log('PDF加载完成，可以打开模态框');
    } catch (err) {
      console.error('加载PDF相关数据失败', err);
    }
  },
  methods: {
    ...mapActions('pdfs', {
      fetchPdfFile: 'fetchPdfFile',
    }),
    ...mapActions('document', {
      loadPdfId: 'loadPdfId'
    })
  }
}
</script>

关键说明 #

• 你的fetchPdfFile action本身是async函数，会自动返回Promise，因此可以直接用await或.then()处理后续逻辑。
• 绝对不要用setTimeout等待异步数据，无法预估实际加载时间，会导致逻辑执行时机不可控。
• 监听state变化或等待异步操作的Promise完成，才是处理异步数据的可靠方案。

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