Отмена отправки в Inertia

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

Пока свойство processing истинно, у объекта формы доступен метод cancel. Он прерывает текущую отправку Inertia. Кнопку отмены делают обычной кнопкой и показывают только на время запроса.

Давайте опишем адрес формы и приём полей:

<?php
	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (Request $request) {
		return back();
	});
?>

Давайте добавим отправку и кнопку отмены:

<script setup>
	import { useForm } from '@inertiajs/vue3'

	const form = useForm({
		title: '',
	})

	function submit() {
		form.post('/posts')
	}
</script>

<template>
	<form @submit.prevent="submit">
		<input
			type="text"
			v-model="form.title"
		/>
		<button
			type="submit"
			:disabled="form.processing"
		>
			Save
		</button>
		<button
			v-if="form.processing"
			type="button"
			@click="form.cancel()"
		>
			Cancel
		</button>
	</form>
</template>

На форме работника Rex добавьте кнопку, которая видна только во время отправки и обрывает запрос.