Question

在我的Vue应用程序中，当我同时调用它们时，我的API会调用超时。我正在使用axios，我的数据将存储在VueX存储中。

我已将我的API调用放入setTimeout方法中，并将它们设置为在不同时间触发。它可以工作，但是看起来很杂乱，也不是编写代码的最佳方法。有没有一种方法可以在没有setTimeout的情况下，甚至在async/await的情况下达到相同的效果？

这是我的主要内容。这些称为单击按钮。

            this.$store.dispatch('undoButton', this.undoBtnAPI)
          setTimeout(() =>{
            this.$store.dispatch('getSQLData', this.apiQuery)
          }, 500)
        }, 300)

这是VueX商店中的API调用

actions: {
getSQLData (context, query) {
      console.log(query + 'query var')
      return new Promise(function (resolve, reject) {
        console.log('SQL Action Called')
        console.log('query var: ' + query)
        axios.get(MS_SQL_URL + '/api/' + query)
        .then(response => {
          this.commit('initialDataUpdate', response.data.recordset)
          // console.log(response.data.map(item => item.ProcessSequence))
        })
        .then(response => {
          this.commit('completeDataLoading')
        })
        .catch(e => {
          console.log('SQL API error: ' + e)
          this.mssql.push(e)
        })
      }.bind(this))
},
undoButton (context, query) {
      return new Promise(function (resolve, reject) {
        axios.get(MS_SQL_URL + '/api/' + query)
        .then(response => {
          this.commit('initialUndoButtonData', response.data.recordset[0]['CSN'])
        })
        .then(response => {
          this.commit('completeUndoDataLoading')
        })
        .catch(e => {
          console.log(`SQL ERROR ${e}`)
          this.mssql.push(e)
        })
      }.bind(this))
    }
}

Answer 1

您只需将它们与then链接起来，它们就会一个接一个地运行：

   this.$store.dispatch('undoButton', this.undoBtnAPI).then(()=>{
       this.$store.dispatch('getSQLData', this.apiQuery)
   })

在不同时间进行API调用的最佳方法是什么？

1 个答案: