面试题：Svelte 组件中 onMount 和 onDestroy 的复杂交互场景

Question

假设有一个 Svelte 组件，它会在页面中动态创建和销毁一些 DOM 元素，同时需要与外部 API 进行交互。在这种场景下，如何合理地使用 onMount 和 onDestroy 生命周期函数，以确保 API 请求的正确处理、资源的合理释放以及 DOM 操作的一致性？请详细描述实现思路并给出关键代码片段。

Answer 1

1. 实现思路：
   • onMount阶段：
     • 在此阶段进行与外部API的交互操作。因为此时组件已挂载到DOM，确保可以安全地执行依赖于DOM存在的操作。
     • 例如，初始化一些需要从API获取数据来填充的DOM元素。
   • onDestroy阶段：
     • 当组件即将从DOM中移除时，需要清理所有相关资源。
     • 对于API请求，这可能意味着取消未完成的请求，以避免内存泄漏或产生无效操作。
2. 关键代码片段：

<script>
    import { onMount, onDestroy } from'svelte';
    let apiRequest;

    onMount(() => {
        // 发起API请求
        apiRequest = fetch('your - api - url')
          .then(response => response.json())
          .then(data => {
                // 使用API数据更新DOM相关操作
                // 例如假设组件中有一个id为'result'的div，用来显示API数据
                const resultDiv = document.getElementById('result');
                resultDiv.textContent = JSON.stringify(data);
            });
    });

    onDestroy(() => {
        // 取消未完成的API请求（如果支持取消，例如使用AbortController）
        if (apiRequest && typeof apiRequest.abort === 'function') {
            apiRequest.abort();
        }
        // 清理相关DOM操作（例如移除事件监听器等，如果有）
        const resultDiv = document.getElementById('result');
        if (resultDiv) {
            // 移除可能添加的事件监听器
            resultDiv.removeEventListener('click', () => {});
        }
    });
</script>

<div id="result"></div>