promise.race去处理请求接口超时

问题：前端调后端接口请求超时，需要20秒，然后再手动刷新才能将接口请求的数据给渲染，不手动刷新就还是旧数据，

实现思路: 在前端调用后端接口时，可以通过设置请求的超时时间来控制等待响应的时间。

使用方法：Promise.race()方法

实现代码如下：

async updateBtn() {
  this.$refs.refForm.validate(async (valid) => {
    if (valid) {
      this.isDisable = true
      this.isLoading = true

      // 设置超时时间为20000毫秒（20秒）
      const timeout = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject(new Error('请求超时'));
        }, 20000);
      });

      // 使用Promise.race()等待接口响应或超时
      Promise.race([updateXdfTextAPI(this.form), timeout])
        .then((res) => {
          this.$message.success(this.$t('xdfText.message1success'))
        })
        .catch((error) => {
          if (error.message === '请求超时') {
            this.$message.error('请求超时，请稍后再试')
          } else {
            this.$message.error(error.response.data.msg)
          }
        })
        .finally(() => {
          this.isLoading = false
          this.isDisable = false
        });
    } else {
      this.$message.error(this.$t('xdfText.message2error2'))
    }
  })
},

补充说明，我看大家对Promise.race()方法的使用，很少是我这种，而更多的是这样的场景：同时请求多个接口，给每个接口设置不同的时间，那么Promise.race()会优先打印时间短的。代码如下：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1 resolved'), 500);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 2 resolved'), 100);
});

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value); // 输出 "Promise 2 resolved"，因为 promise2 比 promise1 更早完成
  })
  .catch(error => {
    console.error(error);
  });

Promise.race 是 JavaScript 中的一个 Promise 方法，它接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象会在传入的 Promise 对象数组中的任何一个 Promise 完成或拒绝时立即解析或拒绝。

Promise.race 的主要用途是在多个异步操作中，只关心哪个操作最先完成或失败。例如，你可能想要在多个网络请求中获取第一个完成的响应，或者在多个定时器中获取第一个触发的定时器结果。

 

在这个例子中，我们创建了两个定时器，分别在 500ms 和 100ms 后解析。通过使用 Promise.race，我们可以确保只关注最早完成的定时器。在这种情况下，promise2 会首先完成，因此控制台将输出 "Promise 2 resolved"。

需要注意的是，Promise.race 不会等待所有传入的 Promise 都完成或拒绝，而是只要有一个 Promise 完成或拒绝，就会立即解析或拒绝新的 Promise。这意味着如果有多个 Promise 完成或拒绝，只有最先完成的 Promise 的结果会被传递给 then 或 catch 处理程序。