如果一个人失败了，则防止保存数据。

Question

我有两种形式的数据，需要使用两个单独的帖子API来保存数据。我正在使用Promise.All（）一次从这两种形式中保存所有数据，并尽其所能。代码如下：

saveAll() {
        Promise.all([
            this.$axios.post('v1/dummy-api/one',
              this.saveFormOne()
            ),
            this.$axios.post('v1/dummy-api/two',
              this.saveFormTwo()
            )
          ])
          .then(() => {
            this.success = 'Added Successfully.';
          })
          .catch(error => {
            this.error = 'Error.';
          })
      },

试图解决的问题是，我需要检查这两个请求中的任何一个是否失败了，如果它确实可以阻止/取消保存另一个请求（成功），直到全部成功。我尝试过没有运气的尝试/捕捉。

任何帮助都将非常感谢！

Answer 1

您需要使用Axios AbortController（ httpps://axios-http.com/docs/docs/docs/cancellation ）。要警惕，尽管取消请求可能不一定保证帖子尚未正确执行。如果您不得拨打另一个端点，则最简单的方法是链接它们并接一个致电。

无论如何，在下面显示了一种实现这一目标的方法。请注意，我需要对其进行一些修改，以便在Stackoverflow答案中可以执行。不过，您会从中得到一个一般的想法。

function saveAll() {
    const cancel = new AbortController();
    Promise.all([
            axios.get('https://test-stackoverflow.free.beeceptor.com', {}, {
                signal: cancel.signal
            }).catch((e) => {
                cancel.abort();
                throw e;
            }),
            axios.get('https://thiswillfail.com/fail', {}, {
                signal: cancel.signal
            }).catch((e) => {
                console.log('second request has failed')
                cancel.abort();
                throw e;
            })
        ])
        .then(() => {
            alert('Added Successfully.');
        })
        .catch(error => {
            alert('Error.');
        })
}

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<button onclick="saveAll()">save all</button>

Answer 2

async saveAll() { 
 const resp1 = await this.$axios.post('v1/dummy-api/one', this.saveFormOne())
 const resp2 = await this.$axios.post('v1/dummy-api/two', this.saveFormTwo())
}

我不知道这是否可以解决

Answer 3

Promise.all（）如果需要管理这些API调用，则不是您需要的。您可以做类似于王超华建议的类似的部分，但是使用其他尝试/捕获

async function saveAll() { 
  let first;
  try {
    first = await this.$axios.post('v1/dummy-api/one', this.saveFormOne())
  } catch (e) {
    console.log('first failed')
    return
  }
  console.log('first', first)

  const second = await this.$axios.post('v1/dummy-api/two', this.saveFormTwo())
  console.log('second', second)
}

，或者如果要使用Prosisise

saveAll() {
      this.$axios.post('v1/dummy-api/one', this.saveFormOne())
      .then(() => this.$axios.post('v1/dummy-api/two', this.saveFormTwo())
      .then(() => this.success = 'Added Successfully.')
      .catch(error => this.error = 'Error.')
  }

Answer 4

我不确定如何发送请求，但同时取消请求。
请求可能会在几个方面失败，如果您的事物在尝试保存实体时失败，则无法真正从客户端取消该请求（而不发送另一个HTTP调用）。

要么从您的客户端发送另一个HTTP调用以更新失败状态的后端，要么让后端回滚如果您不正确，您尝试过的内容。

这个问题是在此处询问如何解决有关系统设计的问题。该解决方案不是在前端，而是在后端/实现本身上。

您需要找出一种方法：

• 在单独的后端上执行的操作之间的通信（通过中间件后端或类似的方式链接它们）
• 在发送2个HTTP调用之前对客户端进行验证（通过模拟或客户端端验证）
• 放置一些回滚，

最干净的方法是使用 Promise.allsettled ，使用dry-Run ala git的参数（如果有）执行和两者的结果（并防止任何网络错误），然后在模拟正确的情况下重新运行两侧的查询。