Ошибка отдельного запроса в Inertia

Давайте теперь отправим имя работника на JSON-адрес, где сервер проверяет поля. При коде 422 Laravel вернёт ошибки проверки, а при сбое на стороне сервера придёт другой статус без привычного визита Inertia. Отдельный запрос должен сообщить об этом в шаблоне, не ломая страницу.

Хелпер useHttp при ответе 422 сам кладёт сообщения в объект errors по именам полей, их можно вывести рядом с инпутами. Флаг hasErrors подскажет, есть ли такие сообщения. Для прочих HTTP-ошибок, например 500 или 403, служит колбэк onHttpException: он получает объект ответа со статусом и телом. Сеть без связи ловят через onNetworkError.

Давайте опишем страницу и два JSON-маршрута:

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

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

	Route::post('/api/workers', function (Request $request) {
		$request->validate([
			'name' => 'required|string|min:3',
		]);

		return response()->json(['ok' => true]);
	});

	Route::post('/api/workers/broken', function () {
		abort(500);
	});
?>

Давайте выведем ошибки поля и текст для сбоя сервера:

<script setup>
	import { ref } from 'vue'
	import { useHttp } from '@inertiajs/vue3'

	const http = useHttp({
		name: '',
	})

	const serverMessage = ref('')

	function save() {
		serverMessage.value = ''
		http.post('/api/workers', {
			onHttpException: (response) => {
				serverMessage.value =
					'Server error: ' + response.status
			},
		})
	}
</script>

<template>
	<h1>New worker</h1>
	<input v-model="http.name" />
	<div v-if="http.errors.name">
		{{ http.errors.name }}
	</div>
	<p v-if="serverMessage">{{ serverMessage }}</p>
	<button type="button" @click="save">
		Save
	</button>
</template>

Сделайте страницу HireDesk с JSON-сохранением, чтобы пустое имя показывало сообщение проверки у поля, а ответ с кодом 500 выводил отдельную строку о сбое.