vue中 多个请求，如果一个请出错，页面继续执行

vue中 多个请求，如果一个请出错，页面继续执行

在Vue中，可以通过Promise.all()方法来处理多个请求，即使其中一个请求出错，页面也可以继续执行其他的逻辑。

下面是一个示例代码，演示了如何在Vue中处理多个请求时出错但页面继续执行：

// 在Vue组件中的方法中处理多个请求
methods: {
  handleMultipleRequests() {
    const request1 = this.makeRequest1();
    const request2 = this.makeRequest2();
    const request3 = this.makeRequest3();

    // 使用 Promise.all() 处理多个请求
    Promise.all([request1, request2, request3])
      .then((results) => {
        // 所有请求都成功返回结果
        const result1 = results[0];
        const result2 = results[1];
        const result3 = results[2];

        // 处理请求结果
        // ...
      })
      .catch((error) => {
        // 处理请求出错的情况
        console.log('请求出错:', error);

        // 页面继续执行其他逻辑
        // ...
      });
  },
  makeRequest1() {
    // 发送请求1
    return axios.get('/api/request1');
  },
  makeRequest2() {
    // 发送请求2
    return axios.get('/api/request2');
  },
  makeRequest3() {
    // 发送请求3
    return axios.get('/api/request3');
  }
}

在上述代码中，我们使用axios库发送了三个请求（makeRequest1、makeRequest2和makeRequest3），然后使用Promise.all()方法将它们包装起来。当所有请求都成功返回结果时，Promise.all()会将这些结果作为数组传递给then()回调函数，我们可以在then()中处理这些请求结果。如果其中一个请求出错，则Promise.all()会立即执行catch()回调函数，我们可以在catch()中处理请求错误的情况。

在catch()中，你可以根据实际需求进行错误处理，比如打印错误信息、展示错误提示等。然后，页面会继续执行其他逻辑。

需要注意的是，在使用Promise.all()处理多个请求时，只有当所有的请求都被解决（即成功或失败）后，Promise.all()才会被解决。如果你希望某个请求的错误不影响其他请求的处理，可以在请求的catch()中返回一个默认值或任何你认为合适的数据。