javascript - 在等待承诺完成时无法在 Vue.js 中获取 DOM 更新

Question

尽管我通常知道足够危险，但我并不是非常精通 JS 承诺。我正在研究处理搜索中存在的大型数据对象的 Vue 方法this.data()- 通常当我通过 axios 发出异步请求时，这种相同的格式可以正常工作，但在这种情况下，我必须手动创建一个承诺来获得所需的行为。这是代码示例：

        async searchPresets() {

            if (this.presetSearchLoading) {
                return
            }

            this.presetSearchLoading = true; // shows spinner
            this.presetSearchResults = []; // removes old results
            this.selectedPresetImports = []; // removes old user sections from results

            // Need the DOM to update here while waiting for promise to complete
            // otherwise there is no "loading spinner" feedback to the user.
            const results = await new Promise(resolve => {

                let resultSet = [];
                for (var x = 0; x < 10000; x++) {
                    console.log(x);
                }

                let searchResults = [];
                // do search stuff
                resolve(searchResults);

            });

            // stuff after promise

        }

问题是，promise 之后的东西可以正常工作。它在执行之前等待解决方案，并按应有的方式接收正确的搜索结果数据。

问题是 DOM 在调度 promise 时没有更新，所以 UI 就在那里。

有谁知道我做错了什么？

标签： javascriptvue.jsasynchronousvuejs2promise

Answer 1

尝试$nextTick()：

Vue 2.1.0+：

const results = await this.$nextTick().then(() => {                      
  let resultSet = []
  for (var x = 0; x < 10000; x++) {
    console.log(x)
  }

  let searchResults = []
  // do search stuff
  return searchResults
});

任何 Vue：

const results = await new Promise(resolve => {                      
  this.$nextTick(() => {
    let resultSet = []
    for (var x = 0; x < 10000; x++) {
      console.log(x)
    }

    let searchResults = []
    // do search stuff
    resolve(searchResults)
  })
})