Помимо создания ссылок, также можно вручную делать инерционные посещения. Это делается с помощью метода Inertia.visit()
.
// import { Inertia } from '@inertiajs/inertia'
this.$inertia.visit(url, {
method: 'get',
data: {},
replace: false,
preserveState: false,
preserveScroll: false,
only: [],
headers: {},
errorBag: null,
forceFormData: false,
onCancelToken: cancelToken => {},
onCancel: () => {},
onBefore: visit => {},
onStart: visit => {},
onProgress: progress => {},
onSuccess: page => {},
onError: errors => {},
onFinish: visit => {},
})
Однако обычно вместо этого рекомендуется использовать один из методов быстрого доступа. Эти методы имеют те же параметры, что и Inertia.visit()
.
// import { Inertia } from '@inertiajs/inertia'
this.$inertia.get(url, data, options)
this.$inertia.post(url, data, options)
this.$inertia.put(url, data, options)
this.$inertia.patch(url, data, options)
this.$inertia.delete(url, options)
this.$inertia.replace(url, options)
this.$inertia.reload(options) // Использует текущий URL
Метод reload()
- это просто сокращение, которое автоматически посещает текущую страницу, причем для preserveState
и preserveScroll
установлено значение true
.
Используйте опцию method
, чтобы установить метод запроса на get
, post
, put
, patch
или delete
. По умолчанию это get
.
Inertia.visit(url, { method: 'post' })
put
или patch
не поддерживается в Laravel. Вместо этого сделайте запрос через post
, включив в поле _method
значение put
или patch
. Это вызовет спуфингом метода формы.Используйте опцию data
, чтобы добавить данные в запрос.
Inertia.visit('/users', {
method: 'post',
data: {
name: 'John Doe',
email: 'john.doe@example.com',
},
})
Для удобства все методы get()
, post()
, put()
и patch()
включают в качестве второго аргумента значение data
.
Inertia.post('/users', {
name: 'John Doe',
email: 'john.doe@example.com',
})
При посещении Inertia автоматически добавляет новую запись в историю браузера. Однако также можно заменить текущую запись в истории, установив для параметра replace
значение true
.
Inertia.get('/users', { search: 'John' }, { replace: true })
replace
автоматически устанавливается значение true
.По умолчанию при посещении той же страницы принудительно создается новый экземпляр компонента страницы, который очищает любое локальное состояние, такое как входные данные формы, положения прокрутки и состояния фокуса.
В определенных ситуациях необходимо сохранить состояние компонента страницы. Например, при отправке формы Вам необходимо сохранить данные формы на тот случай, если ошибки проверки вернутся.
Это можно сделать, установив для параметра preserveState
значение true
.
Inertia.get('/users', { search: 'John' }, { preserveState: true })
Вы также можете отложенно оценить параметр preserveState
на основе ответа, предоставив обратный вызов.
Inertia.post('/users', data, {
preserveState: (page) => Object.keys(page.props.errors).length,
})
Для удобства методы post
, put
, patch
, delete
и reload
по умолчанию для preserveState
имеют значение true
.
При переходе между страницами Inertia имитирует поведение браузера по умолчанию, автоматически сбрасывая положение прокрутки тела документа (а также любые определенные Вами области прокрутки) обратно наверх. Используйте опцию preserveScroll
, чтобы отключить это поведение.
Inertia.visit(url, { preserveScroll: true })
Вы также можете отложенно оценить параметр preserveScroll
на основе ответа, предоставив обратный вызов.
Inertia.post('/users', data, {
preserveScroll: (page) => Object.keys(page.props.errors).length,
})
Для получения дополнительной информации смотрите страницу управление прокруткой.
Опция only
позволяет Вам запрашивать подмножество свойств (данных) с сервера при последующих посещениях той же страницы.
Inertia.visit('/users', { search: 'John' }, { only: ['users'] })
Для получения дополнительной информации смотрите страницу частичные перезагрузки.
Для страниц, содержащих более одной формы, могут возникнуть конфликты при отображении ошибок проверки, если две формы имеют одинаковые имена полей. Чтобы обойти это, Вы можете использовать пакеты ошибок. Пакеты ошибок охватывают ошибки проверки, возвращаемые сервером, в пределах уникального ключа, специфичного для этой формы.
Inertia.post('/companies', data, {
errorBag: 'createCompany',
})
Для получения дополнительной информации смотрите страницу валидации.
При посещении, включающем файлы, Inertia автоматически преобразует данные запроса в объект FormData
. Если Вы хотите, чтобы при посещении всегда использовался объект FormData
, Вы можете принудительно использовать его с помощью опции forceFormData
.
Inertia.post('/companies', data, {
forceFormData: true,
})
Смотрите страницу загрузка файлов для получения дополнительной информации.
Опция headers
позволяет Вам добавлять в запрос собственные заголовки.
Inertia.post('/users', data, {
headers: {
'Custom-Header': 'value',
},
})
Вы можете отменить посещение, используя токен отмены, который Inertia автоматически генерирует и предоставляет с помощью обратного вызова onCancelToken()
до совершения посещения.
Inertia.post('/users', data, {
onCancelToken: (cancelToken) => (this.cancelToken = cancelToken),
})
// Отменить визит
this.cancelToken.cancel()
Когда визит отменяется, будут вызваны как обратные вызовы событий onCancel()
, так и onFinish()
.
В дополнение к глобальным событиям, Inertia также предоставляет ряд обратных вызовов событий для каждого посещения.
Inertia.post('/users', data, {
onBefore: (visit) => {},
onStart: (visit) => {},
onProgress: (progress) => {},
onSuccess: (page) => {},
onError: (errors) => {},
onCancel: () => {},
onFinish: visit => {},
})
Возврат false
из обратного вызова onBefore()
приведет к отмене посещения.
Inertia.delete(`/users/${user.id}`, {
onBefore: () => confirm('Вы уверены, что хотите удалить этого пользователя?'),
})
Также возможно вернуть обещание из обратных вызовов onSuccess()
и onError()
. Это задержит событие «finish» до тех пор, пока промис не будет выполнен.
Inertia.post(url, {
onSuccess: () => {
return Promise.all([
this.doThing(),
this.doAnotherThing()
])
}
onFinish: visit => {
// Это не будет вызываться, пока не будет doThing()
// и doAnotherThing() закончили.
},
})
Начиная с v0.3.0
, Inertia исключила промис, возвращаемый из Inertia.visit()
. Если Вы вызовете then()
, catch()
или finally()
во время посещения Inertia, Вы получите следующее предупреждение консоли:
Предпочтительный подход - использовать вместо этого новые обратные вызовы событий. Например, вместо использования then()
используйте обратный вызов onSuccess()
.
Inertia.post('/profile', data, {
onSuccess: () => {
// Обработка успешного события
},
onError: (errors) => {
// Обработка ошибок проверки
},
})
Вместо использования finally()
используйте обратный вызов onFinish()
.
Inertia.post('/profile', data, {
onFinish: visit => {
// Обработка события завершения
},
})
И вместо использования catch()
эти неожиданные ошибки лучше обрабатывать с помощью глобального обработчика событий ошибок.
Inertia.on('exception', (event) => {
event.preventDefault()
// Устраните ошибку самостоятельно
})