For循环调用API函数并等待它

时间:2020-03-17 14:21:45

标签: javascript vue.js

我将数据循环进入一个API,如下所示。如何确保在第一次迭代完成后调用下一个迭代?图像我的API每个元素花费一秒钟

saveMyData(){
  this.elements.forEach(element => {
    CALL_MY_API.read(element)
    .then(response =>  {
        // comes here in 1 second
        // do something with response
    }
    .catch(error => {
       this.showError(error)
    })
 })
}

1 个答案:

答案 0 :(得分:3)

这将启动一堆并行的异步操作。我认为这不是您想要的,并且您要等待一个实际完成之后再开始下一个。

最简单的方法就是使用async / await语法:

async saveMyData() {
  for (const element of this.elements) {
    try {
      const response = await CALL_MY_API.read(element)
      // do something with response
    } catch (error) {
      this.showError(error)
    }
  }
}

如果不能,则需要手动链接承诺:

saveMyData() {
  // Start with an immediately resolved promise.
  let promise = new Promise((resolve, reject) => resolve())
  // Add each element to the chain.
  this.elements.forEach(element => {
    promise = promise.then(() => {
      return CALL_MY_API.read(element)
        .then(response => {
          // do something with response
        })
        .catch(error => {
          this.showError(error)
        })
    })
  })
}
相关问题