[MUSIC]
Связь между клиентом и сервером никогда не делается.
Перефразируя знаменитую пословицу,
существует много колчана между клиентом и сервером.
Итак, как мы справляемся с ошибками, когда они возникают,
, когда мы общаемся между клиентом и сервером?
Давайте поговорим об этом в этом упражнении.
Когда сервер генерирует ответ или HTTP-клиент
при общении с сервером обнаруживает ошибку, а затем генерирует
ответ об ошибке, он доставляется в виде ответа об ошибке HTTP.
Теперь, этот ответ, мы хотим, чтобы иметь возможность обрабатывать его и
затем превратить это в строку сообщения ответа, который
может быть доставлен клиенту, чтобы клиент мог отобразить это на экране.
Таким образом, чтобы мы могли сделать это,
мы создадим новую службу с именем процесса HTTP-сообщение в этом, это папка.
Для этого в командной строке введите ng,
g services/ProcessHTTPMsg,
и создайте службу ProcessHTTPMsg.
Теперь, как только сервис будет создан, мы продолжим и
добавим его в модуль приложения.
А затем добавим метод в сервис ProcessHTTPMsg.
Теперь, когда мы создали сервис ProcessHTTPMsg,
давайте продолжим, а затем добавим его в файл app.module.ts.
Таким образом, перейдя к файлу app.module.ts,
позвольте мне импортировать службу ProcessHTTPMsg,
От './службы/процесс-httpmsg.service '.
Так как только это импортируется, то мы сможем использовать это в нашем приложении.
Так что давайте продолжим и добавим это в наших провайдерах.
Таким образом, зайдя в наших провайдеров,
позвольте мне добавить в ProcessHTTPMsgService в провайдеров.
Первое, что мы сделаем, это включить новый метод в
ProcessHTTPMsgService, называемый handle erlors,
, который будет заботиться о обработке ошибок, когда они возникают.
И тогда мы будем использовать их в сервисах, где мы получаем доступ к серверу.
Чтобы начать, давайте сначала импортировать,
throwError from, rxjs,
, и это помогает нам бросать ошибку всякий раз, когда это возникает.
И затем мы импортируем HttpErrorResponse из,
угловой/общего/http.
Тогда мы приступим к разработке метода handleError, и
это принимает, в качестве параметра, ошибку, которая может быть ответом,
, который является ответом на ошибку с сервера,
или любой другой причиной возникновения ошибки.
Итак, в рамках этого метода handleError, что мы должны делать?
Давайте попробуем построить сообщение, которое суммирует, что такое ошибка.
Таким образом, мы включим здесь новую строковую переменную.
Если error.error является экземпляром
ErrorEvent, поэтому если это событие происходит,
, то error.message будет содержать информацию.
Таким образом, мы установим сообщение об ошибке
error.message.
Если это не так, то это означает, что это происходит со стороны сервера,
и поэтому в этом случае сообщение об ошибке строится, говоря равным обратным кавыкам,
обратите внимание на обратные кавычки здесь, а затем $ {error.status}.
Таким образом, мы извлекаем информацию о состоянии оттуда.
И затем, - error.statusText,
, если statusText существует, или
, которая будет пустой строкой.
И тогда мы также включим сам error.error,
сам полный объект ошибки, прямо там в строке.
И затем используйте это как наше сообщение об ошибке.
Теперь, как только у нас есть сообщение об ошибке,
, то мы сможем использовать throwError для
вернуть ошибку наблюдаемую в нашем приложении.
Так что это означает, что это бросает ошибку в этот момент,
с сообщением об ошибке, включенным там.
Таким образом, эта строка сообщения об ошибке построена на основе информации
, которую мы получаем здесь, либо потому, что серверная сторона ответила с ошибкой, либо
ошибка может быть из других причин.
Поэтому в любом случае мы построим сообщение об ошибке, а затем вернем его.
Теперь, где мы используем эту ошибку дескриптора?
Теперь, в рамках наших услуг, например файл dishservice.ts,
мы видели, что раньше, когда мы сказали, что это HTTP получить, а затем мы просто сказали карту,
, а затем предположили, что ответ всегда положительный ответ.
Но предположим, что их ответ не положительный, и
тогда он возвращает ошибку, тогда нам нужно поймать эту ошибку.
Чтобы помочь нам в этом, мы импортируем оператор catchError из rxjs,
, а затем мы также импортируем ProcessHTTPMsgService
, который мы только что создали ранее, в
наш сервис-блюдо, чтобы мы могли использовать метод ошибки дескриптора оттуда.
Таким образом, мы импортируем это из./процесс-httpmsg.service.
А затем, перейдя к конструктору,
, мы теперь вводим процесс HTTP-сообщения
в конструктор вместе с HTTP-клиентом.
Чтобы мы могли использовать этот сервис,
особенно метод обработки ошибок сервиса для обработки ошибок
, которые возвращаются нашим HTTP-клиентом там.
Теперь, как только мы настроили конструктор,
, то для обработки ошибки в методе getDises для примера
, мы будем передавать метод catchErrors.
А затем вызовите метод handleError после
этого.processHTTPMsgService в методе catchError.
Таким образом, когда HTTP-клиент возвращает ошибку, это будет обработано и
соответствующее сообщение об ошибке будет извлечено.
И тогда он в конечном итоге выбросит ошибку через
метод handleError в этот момент.
Аналогично, давайте сделаем то же самое с методами getDish и
getFeatureDish.
Теперь, когда дело доходит до метода getDish ids,
, поскольку метод getDish ids использует метод getDish,.
Поэтому нам не нужно явно вызывать handleError, потому что если возникнет какая-либо ошибка
метод getDishes уже преобразует эту ошибку в строку ошибки.
Поэтому нам просто нужно поймать ошибку, а затем вернуть ошибку из getDish Ids.
Обычно мы даже не подошли бы к этому моменту, если возникает ошибка, потому что
метод getDishes обрабатывал бы ошибку соответствующим образом в этот момент.
Таким образом, как только мы настроили блюдо должным образом,
, то мы сможем затем использовать метод catchError
для устранения ошибок, которые возникают.
Теперь, когда мы обновили наш сервис, чтобы иметь возможность справляться с ошибками.
Как мы справляемся с этим в рамках нашего компонента?
Так внутри компонента, так, например, когда мы переходим к компоненту меню.
Мы понимаем, что когда мы делаем подписку,
мы ожидали, что блюда будут доставлены нам.
Теперь, возможно, что инструкция блюд,
ошибка будет доставлена наблюдаемым броском и
, то это приводит к тому, что сообщение об ошибке будет доступно нам.
Итак, чтобы справиться с этой ситуацией, я введу новую переменную
под названием errMess в компонент меню, который имеет тип string.
И тогда сам метод subscribe предоставляет способ обработки ошибок.
Таким образом, метод подписки, прямо сейчас мы указали только одну функцию здесь.
Мы также можем указать вторую функцию, которая будет вызываться
при появлении ошибки.
Таким образом, в этом случае я могу предоставить вторую функцию ошибки, говоря
errMess, которая является значением, возвращаемым в
, когда наблюдаемый бросок выполняется dishService.
Так что в этом случае я бы сказал это.errMess = errMess, и все.
Итак, вот что происходит, когда наблюдаемый
возвращается dishService является Value,
, то это будет обрабатываться первой частью.
Если наблюдаемый возвращается с наблюдаемым броском,
, то эта функция будет выполнена.
И в этой функции мы берем сообщение об ошибке и
, а затем захватывая это сообщение об ошибке в эту строку errMess, которая у нас есть здесь.
Итак, теперь у нас есть сообщение об ошибке, поэтому
мы можем отобразить это сообщение об ошибке в представлении этого компонента меню.
Итак, как мы отображаем это в представлении компонентов меню?
Итак, идя к шаблону компонентов меню файла, здесь мы видим, что если блюда не null,
то мы показываем меню со всеми блюдами.
Если блюда равны нулю, то этот счетчик отображается там.
Теперь мы добавим еще один здесь,
, даже если errMess, что у нас есть,
переменная, не null, то также
прядильщик должен быть скрыт, а затем,
, наконец, добавить еще один div с ngIf.
Итак, что это делает, так это то, что это последнее погружение будет отображаться в
, если есть ошибки, и сообщение об ошибке.
Строка ErrMess настроена на сообщение об ошибке.
Так что в этом случае мы просто скажем ошибку h2,
, а затем я просто собираюсь отобразить эту строку как,
Строка в представлении там, вот и все.
Вы можете сделать более сложный способ отображения сообщения об ошибке, если вы так
хотите.
Но все, что я собираюсь сделать, это если есть ошибка,
я просто покажу ошибку на экране, а затем отобразит errMess.
Вы даже можете стиль, изменив цвет на красный и
так далее, но я просто оставлю его там.
Таким образом, с этим, мы в конечном итоге отобразим сообщение об ошибке в представлении здесь.
Та же процедура также может быть использована с компонентом блюда и
также домашним компонентом, где мы получаем доступ к блюду.
Так что, идя к блюду, я буду делать точно то же самое.
поэтому в компоненте блюда я включу, ErrMess здесь.
И затем прямо здесь, в рамках подписки,
это то, где мы получаем стоимость блюда.
Таким образом, первая часть
то, что мы уже включили, будет вызвана, если наблюдаемый возвращает значение.
Но если он не возвращает значение, то нам нужно иметь дело с сообщением об ошибке.
И мы будем использовать точно ту же функцию сообщения об ошибке
, что мы определили ранее в компоненте меню.
Итак, скажем, что это.errMess
= Ermess здесь.
Вот и все, поэтому моя составляющая блюда теперь обновлена.
Поэтому мне нужно обновить файл шаблона компонента блюдо.
Итак, идя в файл шаблона,
мы видим, что мы будем отображать блюдо, если блюдо не равно нулю.
А затем внизу, мы обрабатываем ситуацию
, где мы покажем прядильщик, если блюдо равно нулю.
Так что позвольте мне добавить также, если сообщение об ошибке не равно нулю, то я должен отображать сообщение об ошибке, а не блюдо здесь, верно?
Итак, позвольте мне продолжить и
скопировать код из компонента меню.
Я собираюсь использовать точно такой же код для
файл шаблона компонентов детали блюда.
Итак, вот здесь.
Позвольте мне продолжить и вставить этот код здесь.
Таким образом, мы видим, что если errMess не равно null,
, то эта ошибка будет отображаться в представлении там.
Теперь то же самое,
идя к домашнему компоненту, мы должны пройти ту же процедуру.
Теперь в рамках домашней составляющей, конечно, у нас есть блюдо, продвижение и лидер.
Поэтому я собираюсь определить отдельные строки для
каждого из них, потому что ошибка может возникнуть из любого из трех.
Сейчас мы имеем дело только с блюдом, извлекаемым со стороны сервера.
Остальные два я ожидаю, что вы сделаете это в рамках, Заключительного задания.
Так что мы, я скажу блюдо errmess строки, а затем спустимся в код здесь.
И в коде тут
мы просто скажем errmess.
Это блюдо errmess = любой
errmess, вот и все.
И аналогичным образом обновите файлы шаблонов домашних компонентов.
И идя в файл шаблона домашних компонентов,
мы видим, что у нас есть ящик для посуды отображается там,
так что теперь для этого я должен сказать или блюдо errMess.
И затем, ниже, я включу код
, который я скопировал из компонента меню, и
затем я обновляю его до блюда ErrMess здесь.
А также обновите это до dishErrMess здесь, вот и все.
Давайте сохраним изменения.
Перейдя в браузер, вы видите, что все работает как раньше.
Главная, компонент меню, а также компонент детали блюда без каких-либо проблем.
Теперь вопрос в том, как мы вызываем ошибки?
Чтобы вызвать ошибки, один из возможных способов, с помощью которых мы можем справиться с этой проблемой, - мы идем и
искать несуществующую информацию с сервера.
Позвольте мне пойти на блюдо, а затем вызвать
мою первую проблему в dishService здесь.
Так что для рекомендуемого блюда вместо блюд, позвольте мне сделать ошибку и
сказать dischees, а затем сохранить изменения.
Очевидно, что это означает, что этот URL-адрес не существует.
Итак, что произойдет, если он получит доступ к серверу?
Перейдя в браузер, когда мы теперь прокручиваем,
вы видите, что блюдо здесь не отображается.
Здесь написано, что ошибка 404 не найдена.
Это потому, что мы пытаемся получить доступ к информации о блюде на
URL dishees, который не существует на стороне сервера.
Таким образом, вы видите, как здесь отображается сообщение об ошибке.
Конечно, вы можете быть немного более фантастичным и делать больше работы вокруг этого, а затем
отображать сообщение об ошибке более значимым образом.
Но основной принцип выделен здесь, говоря, что вы
можете показать сообщение об ошибке, если что-то не выполняется должным образом
, когда вы пытаетесь получить доступ к информации со стороны вашего сервера.
Конечно, так что это искусственно созданная ошибка в моем приложении.
Чтобы вызвать еще одну ошибку, я пошел в окно терминала и
затем выключил сервер, чтобы увидеть, что мое угловое приложение будет делать в этом случае.
Итак, после выключения сервера,
давайте посмотрим, что домашний компонент будет отображаться в своем представлении.
Итак, перейдя к домашнему компоненту, мы теперь видим, что, поскольку мое приложение Angular
не может получить доступ к серверу, это снова вызвало ошибку.
И затем он показывает эту строку, чтобы указать, что произошла некоторая ошибка.
Конечно, это загадочная строка,
не передает ничего значимого о том, что является источником ошибки.
Но это все, что мы могли получить, пытаясь получить доступ к серверу в этом приложении.
То же самое, если я перейду в меню, вы увидите то же самое, что и
, потому что сервер недоступен, и поэтому
информация о блюде не может быть получена с сервера.
С этим мы завершаем это упражнение.
В этом упражнении мы научились справляться с ошибками
, возникающими во время связи с клиентским сервером в нашем угловом приложении.
Это хорошее время для вас, чтобы сделать git commit с сообщением http часть вторая.
[МУЗЫКА]