Promise 和 Async 函数的问题答案

【问题标题】：Trouble with Promise and Async functionsPromise 和 Async 函数的问题
【发布时间】：2020-03-25 10:16:51
【问题描述】：

我正在尝试使用承诺和异步函数将数组的块发送到将它们插入数据库的 api 调用。我试图让顶部函数对数组进行分块并等待后端完成，然后它将继续进行下一个块。它在第一次迭代后出错。有什么想法吗？？

async chunkArray(arr) {
   let len = arr.length
   let update_arr
   let i = 1
   for(i; i<=len; i++) {
     if((i%125) === 0) {
       update_arr = arr.slice(i-125,i)

       await this.updateChuckArray(update_arr)
     } else if(i === len) {
       let div = (Math.floor(len/125) * 125)
       update_arr = arr.slice(div, len)

       await this.updateChuckArray(update_arr)
     }
   }
},

updateChuckArray(update) {
  return new Promise(resolve => {
    this.$http.put(`/route`, update).then(res => {
      res.data.error ? this.$root.updateError(res.data.error) : this.$root.updateSuccess(res.data.message)
    }).catch(error => {
        this.$root.updateError(res.data.error)
      })
  })
}

【问题讨论】：

它是如何“出错”的？
我收到请求实体太大，我正在尝试发送长度为 125 的数组卡盘
你在数组上循环和切片的方式看起来很奇怪。为什么不只是do it like this？我怀疑这可能会解决您的错误。您还应该尝试使用调试器单步执行循环，以准确查看每一步从数组中切出的内容。

标签： node.js vue.js

【解决方案1】：

首先你的updateChuckArray() 永远不会解决它返回的承诺（你永远不会调用resolve()）。

您可以只返回您已经拥有的 Promise 并像这样编写它，而不是手动将新的 Promise 包装在您的函数调用周围（这是一种 Promise 反模式）：

updateChuckArray(update) {
    return this.$http.put(`/route`, update).then(res => {
      res.data.error ? this.$root.updateError(res.data.error) : this.$root.updateSuccess(res.data.message);
    }).catch(error => {
        this.$root.updateError(error);
    })
}

仅供参考，目前尚不清楚您的错误处理策略是什么。按照您编写代码的方式（如上所示），您从this.$http.put() 捕获一个错误并处理它并让循环继续。如果这就是你想要的，这将起作用。如果您希望for 循环在出错时中止，那么您需要在.catch() 处理程序中重新抛出错误，以便错误返回到await。

另外，不是在您的 .catch() 处理程序中，您正在这样做：

this.$root.updateError(res.data.error)

但那里没有定义res。错误在error。您需要使用它来报告错误。我不确定错误对象的结构是什么，或者您传递给$.root.updateError() 的具体内容是什么，但它必须来自error 对象，而不是名为res 的对象。

【讨论】：