Async

#[Async] 属性允许操作并行运行、无需排队，即使其他请求正在进行中，也能立即执行。

基本用法

将 #[Async] 属性应用到任何应并行运行的操作方法上：

<?php // resources/views/components/post/⚡show.blade.php

use Livewire\Attributes\Async;
use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    #[Async] // [tl! highlight]
    public function logActivity()
    {
        Activity::log('post-viewed', $this->post);
    }
};

<div wire:intersect="logActivity">
    <!-- Logs activity asynchronously when element enters viewport -->
</div>

调用 logActivity() 时，它会立即执行，既不阻塞其他请求，也不被其他请求阻塞。

何时使用

对「即发即弃」、结果不影响页面展示的操作使用 #[Async]：

• 分析与日志 - 跟踪用户行为、页面浏览或交互
• 后台操作 - 触发任务、发送通知或更新外部服务
• 仅供 JavaScript 使用的结果 - 通过 await $wire.getData() 获取仅由 JavaScript 消费的数据

下面是一个跟踪外部链接点击的示例：

<?php // resources/views/components/⚡external-link.blade.php

use Livewire\Attributes\Async;
use Livewire\Component;

new class extends Component {
    public $url;

    #[Async] // [tl! highlight]
    public function trackClick()
    {
        Analytics::track('external-link-clicked', [
            'url' => $this->url,
            'user_id' => auth()->id(),
        ]);
    }
};

<a href="{{ $url }}" target="_blank" wire:click="trackClick">
    Visit External Site
</a>

由于跟踪是异步进行的，用户的点击不会被网络请求拖慢。

何时不要使用

WARNING

异步操作与状态变更不宜混用

若操作会修改反映在 UI 中的组件状态，切勿使用异步操作。 因为异步操作并行运行，可能出现不可预测的竞态条件，使组件状态在多个同时进行的请求之间出现分歧。

请看这个危险的示例：

// Warning: This snippet demonstrates what NOT to do...

<?php // resources/views/components/⚡counter.blade.php

use Livewire\Attributes\Async;
use Livewire\Component;

new class extends Component {
    public $count = 0;

    #[Async] // Don't do this! [tl! highlight]
    public function increment()
    {
        $this->count++; // State mutation in an async action [tl! highlight]
    }
};

若用户快速点击递增按钮，会同时发出多个异步请求。每个请求都以相同的初始 $count 值开始，导致更新丢失。你可能点了 5 次，计数器却只增加了 1。

经验法则： 仅对执行纯副作用的操作使用异步——即不改变任何会影响组件视图的属性的操作。

替代方式

使用 .async 修饰符

除了使用属性，你也可以用 .async 修饰符让特定的操作调用变为异步：

<button wire:click.async="logActivity">Track Event</button>

当你希望同一操作在某些地方异步、在另一些地方同步时，这种方式很有用。

了解更多

关于异步操作、竞态条件与高级用法的更多信息，请参阅操作文档。