javascript - Vue Actions 中的菊花链式 promise 会导致无限循环

Question

我对 VueJS 设置中的 Javascript Promises 有疑问，我有一个应用程序使用 Action 从 IndexedDB(如果已设置)或通过发出 Axios HTTP 请求从 API 获取国家/地区列表。

现在，我从操作中返回一个 promise ，因为我希望能够在完成此任务时在 UI 中触发一些弹出窗口，并且最重要的是 Axios 和 Dexie(我将其用于 IndexedDB)运行通过 Promises 本身进行异步操作。

  getCountries({commit, dispatch}) {

    commit(types.MUTATIONS.SET_LOADING, true, {root: true})
    commit(types.MUTATIONS.SET_LOADER_MESSAGE, "Loading Countries Data...", {root: true})

    return new Promise((resolve, reject) => {
      db.countries.count().then(value => {
        if(value > 0) {
          console.log("Loading Countries from IndexedDB")
          db.countries.toArray().then(collection => {
            commit(types.MUTATIONS.COUNTRIES.SET, collection, {root: true})
            resolve(collection);
          })
        } else {
          fetchCountriesData().then(data => {
            console.log("Loading Countries from API Call")
            commit(types.MUTATIONS.COUNTRIES.SET, data, {root: true})
            db.countries.bulkAdd(data)
            resolve(data)
          }).catch(error => {
            reject(error)
          })
        }
      })
    })
  }

这是该操作的代码，它只是执行我上面描述的操作，问题是这会导致无限循环，其中 LOADER 突变被一遍又一遍地触发。

为什么会这样？谁能帮我理解这个？它似乎运行了初始 API 操作，但是 THEN 之后，随着国家已经加载，它循环并再次运行，这次也调用 indexeddb 突变，这很奇怪，如果我解决它不应该就此结束吗？

额外::

该操作是在我的应用程序中的 View 中调用的，我在 created() Hook 中调用它，以便确保国家列表始终加载到我的 Vuex 状态中.

created() {
  this.getAllCountries().then(response => {}).catch(error => {
    snackbar("Unable to load countries!", "error")
  }).then(() => {
    this.setLoadingStatus(false);
  })
}

在这种情况下，如果没问题，它什么都不做，但将来可能会发生变化，出现错误时，它应该显示一个弹出窗口，通知用户无法加载数据，并且在任何一种情况下，它都应该隐藏加载栏(也是通过 Vuex 处理的)

这可能是问题的原因吗？

Answer 1

没关系，我的代码中有一个逻辑错误，基本上是为了防止任何人在加载时能够单击项目我使用 v-if="loading" 有条件地设置 View ，以便如果加载只显示 Loader div，否则显示实际布局。

这种方法的问题在于，每次再次显示主视图时，它都会重新触发 created Hook ，从而导致我的愚蠢循环。

希望这对以后的人有帮助。