惯性2.0发布，现在支持异步请求-优快云博客

惯性团队最近发布了惯性2.0。新功能包括异步请求，递延道具，预摘要和投票。异步请求启用并发，懒惰加载等。

在以前的版本中，惯性请求是同步的。现在，异步请求现在为异步操作和并发提供全面支持。反过来，这可以使诸如滚动滚动，无限滚动，预取，轮询等方面的懒惰加载数据等功能。这些功能使单页应用程序看起来更具交互性，响应性和快速。

例如，链接预摘要例如通过在用户请求之前在后台获取数据来改善应用程序的感知性能。默认情况下，当用户在超过75毫秒之后徘徊在链接上时，惯性将预取数据。默认情况下，在被驱逐之前，将数据缓存30秒。开发人员可以使用该cacheFor属性自定义它。使用Svelte，这看起来如下：

<span style="background-color:#f5f2f0"><span style="color:#000000"><code class="language-html">import { inertia } from '@inertiajs/svelte'

<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>a</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>/users<span style="color:#999999">"</span></span> <span style="color:#669900">use:inertia</span><span style="color:#0077aa"><span style="color:#999999">=</span>{{</span> <span style="color:#669900">prefetch:</span> <span style="color:#669900">true,</span> <span style="color:#669900">cacheFor:</span> <span style="color:#669900">'1m'</span> <span style="color:#669900">}}</span><span style="color:#999999">></span></span>Users<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>a</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>a</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>/users<span style="color:#999999">"</span></span> <span style="color:#669900">use:inertia</span><span style="color:#0077aa"><span style="color:#999999">=</span>{{</span> <span style="color:#669900">prefetch:</span> <span style="color:#669900">true,</span> <span style="color:#669900">cacheFor:</span> <span style="color:#669900">'10s'</span> <span style="color:#669900">}}</span><span style="color:#999999">></span></span>Users<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>a</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>a</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>/users<span style="color:#999999">"</span></span> <span style="color:#669900">use:inertia</span><span style="color:#0077aa"><span style="color:#999999">=</span>{{</span> <span style="color:#669900">prefetch:</span> <span style="color:#669900">true,</span> <span style="color:#669900">cacheFor:</span> <span style="color:#669900">5000</span> <span style="color:#669900">}}</span><span style="color:#999999">></span></span>Users<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>a</span><span style="color:#999999">></span></span>
</code></span></span>

预摘要也可能发生mousedown，即用户单击链接的时候，但尚未发布鼠标按钮。最后，当组件安装时也可能发生预取。

Inertia 2.0可以使用滚动组件上的滚动数据WhenVisible，该组件在引擎盖下使用交叉点观察者API。以下代码展示了一个组件，该组件在加载时显示了后备消息（用Svelte 4编写的示例）：

<span style="background-color:#f5f2f0"><span style="color:#000000"><code class="language-html"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>script</span><span style="color:#999999">></span></span>
    <span style="color:#0077aa">import</span> <span style="color:#999999">{</span> WhenVisible <span style="color:#999999">}</span> <span style="color:#0077aa">from</span> <span style="color:#669900">'@inertiajs/svelte'</span>

    <span style="color:#0077aa">export</span> <span style="color:#0077aa">let</span> teams
    <span style="color:#0077aa">export</span> <span style="color:#0077aa">let</span> users
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>script</span><span style="color:#999999">></span></span>

<WhenVisible data={['teams', 'users']}>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>svelte:fragment</span> <span style="color:#669900">slot</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>fallback<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
        <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>div</span><span style="color:#999999">></span></span>Loading...<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>svelte:fragment</span><span style="color:#999999">></span></span>

    <span style="color:slategray"><!-- Props are now loaded --></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>WhenVisible</span><span style="color:#999999">></span></span>
</code></span></span>

文档中可以使用用于懒惰加载和预取的配置选项的完整列表以进行审查。惯性2.0还具有投票，递延道具和无限滚动。鼓励开发人员查看升级指南以获取更多详细信息。

惯性目标是想要使用经典的服务器端路由和控制器创建单页React，vue和Svelte应用程序的后端开发人员，也就是说，没有现代单页应用程序带来的复杂性。使用惯性的开发人员不需要客户端路由或构建API。

惯性在首页加载上返回完整的HTML响应。在随后的请求下，服务器端惯性返回使用实现视图的JavaScript组件（由其名称和道具表示）的JSON响应。然后，客户端惯性将当前显示的页面替换为新组件返回的新页面，并更新历史记录状态。

惯性请求使用特定的 HTTP标头来区分全页刷新和部分刷新。如果 X-Inertia 尚不确定或错误，则标题表示惯性客户端提出的请求是标准的全页访问。

开发人员可以通过安装其选择的客户端适配器（例如，VUE，React，Svelte）来升级到惯性v2.0：

npm install @inertiajs/vue3@^2.0

然后，有必要升级 inertiajs/inertia-laravel 包装以使用 2.x Dev分支：

composer require inertiajs/inertia-laravel:^2.0