Посещения вручную

Помимо создания ссылок, также можно вручную делать инерционные посещения. Это делается с помощью метода 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 })

При посещениях одного и того же URL-адреса для 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 имеют приоритет и поэтому не могут быть перезаписаны.

Отмена посещения

Вы можете отменить посещение, используя токен отмены, который 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, Вы получите следующее предупреждение консоли:

Обещания посещения Inertia.js устарели и будут удалены в следующем выпуске. Вместо этого используйте новые обратные вызовы событий посещения.

Узнайте больше на https://inertiajs.com/manual-visits#promise-deprecation

Предпочтительный подход - использовать вместо этого новые обратные вызовы событий. Например, вместо использования then() используйте обратный вызов onSuccess().

Inertia.post('/profile', data, {
  onSuccess: () => {
    // Обработка успешного события
  },
  onError: (errors) => {
    // Обработка ошибок проверки
  },
})

Вместо использования finally() используйте обратный вызов onFinish().

Inertia.post('/profile', data, {
  onFinish: visit => {
    // Обработка события завершения
  },
})

И вместо использования catch() эти неожиданные ошибки лучше обрабатывать с помощью глобального обработчика событий ошибок.

Inertia.on('exception', (event) => {
  event.preventDefault()
  // Устраните ошибку самостоятельно
})

На этой странице