面试题：JavaScript 子类在异步场景下的异常处理及性能优化

Question

假设你正在开发一个使用 JavaScript 编写的 Web 应用，其中有一个父类 `DataFetcher` 负责基本的数据获取操作，通过 `fetch` 方法从服务器获取数据。子类 `UserFetcher` 继承自 `DataFetcher` 并扩展功能用于获取用户特定数据。 1. 实现 `DataFetcher` 类，其 `fetch` 方法接受一个 URL 作为参数，使用 `fetch` API 获取数据并返回解析后的 JSON 数据，同时正确处理网络错误。 2. 实现 `UserFetcher` 类继承 `DataFetcher`，重写 `fetch` 方法，在获取用户数据前添加用户身份验证逻辑（假设通过向服务器发送一个包含身份令牌的头信息来验证），并且处理身份验证失败的情况。 3. 在异步操作过程中，分析可能出现的性能瓶颈（如并发请求过多、响应时间过长等），并提出至少两种性能优化方案并在代码中实现。

Answer 1

class DataFetcher {
    async fetch(url) {
        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`Network response was not ok: ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('Error fetching data:', error);
            throw error;
        }
    }
}

class UserFetcher extends DataFetcher {
    constructor(token) {
        super();
        this.token = token;
    }
    async fetch(url) {
        const headers = {
            'Authorization': `Bearer ${this.token}`
        };
        try {
            const response = await fetch(url, { headers });
            if (!response.ok) {
                if (response.status === 401) {
                    throw new Error('Authentication failed');
                }
                throw new Error(`Network response was not ok: ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('Error fetching user data:', error);
            throw error;
        }
    }
}

// 性能优化方案1：限制并发请求数量
const limitConcurrentRequests = (requests, maxConcurrent) => {
    return new Promise((resolve, reject) => {
        let completed = 0;
        const results = [];
        const executeRequest = (index) => {
            requests[index]()
              .then(data => {
                    results[index] = data;
                    completed++;
                    if (completed === requests.length) {
                        resolve(results);
                    } else {
                        for (let i = 0; i < requests.length; i++) {
                            if (!results[i] && (results.filter(result => result === undefined).length < maxConcurrent)) {
                                executeRequest(i);
                                break;
                            }
                        }
                    }
                })
              .catch(error => {
                    reject(error);
                });
        };
        for (let i = 0; i < Math.min(maxConcurrent, requests.length); i++) {
            executeRequest(i);
        }
    });
};

// 性能优化方案2：缓存数据
const cache = {};
const cachedFetch = async (url, fetcher) => {
    if (cache[url]) {
        return cache[url];
    }
    const data = await fetcher.fetch(url);
    cache[url] = data;
    return data;
};

性能瓶颈分析

1. 并发请求过多：过多的并发请求可能会耗尽网络资源，导致每个请求的响应时间变长。
2. 响应时间过长：服务器处理请求的时间过长或者网络延迟过高，会影响用户体验。

性能优化方案

1. 限制并发请求数量：通过控制同时进行的请求数量，避免网络资源过度消耗。上述代码中的 limitConcurrentRequests 函数实现了此功能，它接收一个请求数组和最大并发数，按顺序执行请求并控制并发数量。
2. 缓存数据：对于相同 URL 的请求，直接从缓存中获取数据，减少重复请求。上述代码中的 cachedFetch 函数实现了简单的缓存机制，它检查缓存中是否有对应 URL 的数据，如果有则直接返回，否则执行请求并缓存结果。