Вызов без ожидания в Livewire

Давайте теперь посмотрим на долгий запрос по кнопке. Пока он идёт, следующие клики по странице ждут ответа, и вторая кнопка не отзывается, хотя ей нужен свой короткий метод.

Модификатор .async отправляет вызов без блокировки очереди действий на клиенте. Долгий метод крутится на сервере, а остальной интерфейс остаётся живым.

Страница откроется по адресу /posts/slow. Давайте опишем компонент PostSlow:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostSlow extends Component
	{
		public $slow = '';
		public $quick = '';
		
		public function slow()
		{
			sleep(1);
			$this->slow = 'Slow done';
		}
		
		public function quick()
		{
			$this->quick = 'Quick done';
		}
		
		public function render()
		{
			return view('livewire.post-slow');
		}
	}
?>

Давайте выведем долгую кнопку с async, рядом обычную и оба свойства:

<div>
	<button wire:click.async="slow">
		Slow
	</button>
	<button wire:click="quick">
		Quick
	</button>
	<div>{{ $slow }}</div>
	<div>{{ $quick }}</div>
</div>

Давайте откроем страницу по адресу /posts/slow:

<?php
	Route::get('/posts/slow', function () {
		return view('posts-slow');
	});
?>

Давайте вставим компонент на страницу:

<x-layout>
	<livewire:post-slow />
</x-layout>

Создайте компонент EmployeeSlow. Долгое действие не мешает нажать другую кнопку, пока оно идёт.