面试题：Solid.js 路由懒加载下如何处理异步数据加载与路由切换的协同

实现思路

使用 Suspense 组件：Solid.js 中的 Suspense 组件用于处理异步渲染，可在数据加载时显示加载状态。
路由懒加载结合 Suspense：在路由配置中使用懒加载，并将懒加载的组件包裹在 Suspense 中。
取消旧请求：为避免旧路由组件加载过程中的资源浪费，在路由切换时取消旧的异步请求。可以利用 AbortController 来实现。

关键代码示例

路由配置与懒加载

import { Router, Route, Link } from '@solidjs/router';
import { Suspense } from 'solid-js';

const routes = [
  {
    path: '/home',
    component: () => import('./HomePage'),
  },
  {
    path: '/about',
    component: () => import('./AboutPage'),
  },
];

function App() {
  return (
    <Router>
      <nav>
        <Link href="/home">Home</Link>
        <Link href="/about">About</Link>
      </nav>
      <Suspense fallback={<div>Loading...</div>}>
        <Route routes={routes} />
      </Suspense>
    </Router>
  );
}

组件内异步数据加载与请求取消

import { createResource, onCleanup } from'solid-js';

function HomePage() {
  const controller = new AbortController();
  const { signal } = controller;
  const fetchData = async () => {
    const response = await fetch('/api/data', { signal });
    return response.json();
  };
  const [data] = createResource(fetchData);

  onCleanup(() => {
    controller.abort();
  });

  return (
    <div>
      {data()?.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

在上述代码中，createResource 用于处理异步数据加载，onCleanup 回调函数在组件卸载时取消尚未完成的请求，Suspense 组件在数据加载时显示加载状态。通过这些手段确保了新路由组件数据能及时、高效加载，并避免旧路由组件加载资源浪费。

星途面试题库

面试题：Solid.js 路由懒加载下如何处理异步数据加载与路由切换的协同

知识考点

面试题答案

实现思路

关键代码示例