面试题：Vue组件中多个网络请求并发及错误处理策略

Question

在一个Vue组件里，有多个相互独立的网络请求需要同时发起（例如使用axios.all方法），当其中某个请求出错时，你会如何处理整个并发请求过程，确保错误能被正确捕获，同时不影响其他成功请求的数据处理？描述整体思路并给出关键代码片段。

Answer 1

1. 整体思路：

   • 使用axios.all方法来并发执行多个请求。
   • 为每个请求单独添加错误处理，这样某个请求的错误不会直接中断其他请求的执行。
   • 使用Promise.all来处理所有请求的结果，当所有请求（包括出错的请求经过错误处理后）都有结果时，统一处理数据。

2. 关键代码片段：

<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      result1: null,
      result2: null
    };
  },
  mounted() {
    const request1 = axios.get('/api/data1');
    const request2 = axios.get('/api/data2');

    const handleRequest = (request) => {
      return request.then(response => {
        return response.data;
      }).catch(error => {
        // 捕获单个请求的错误
        console.error('单个请求出错:', error);
        return null; // 返回一个默认值，不影响后续Promise.all的处理
      });
    };

    Promise.all([handleRequest(request1), handleRequest(request2)])
    .then(([data1, data2]) => {
        // 处理成功请求的数据
        this.result1 = data1;
        this.result2 = data2;
      });
  }
};
</script>