Как мы уже узнали в предыдущем уроке, протокол
HTTP позволяет нам общаться между клиентом и сервером.
Мы видели некоторые подробности о протоколе HTTP уже в предыдущем уроке.
В этом уроке мы рассмотрим угловую поддержку HTTP.
Угловой поддерживает HTTP через Угловой HTTP-клиент.
Мы рассмотрим, как мы можем использовать
Угловой HTTP-клиент для связи клиент-сервер,
в нашем угловом приложении.
Два упражнения, которые следуют за этой лекцией,
мы рассмотрим практическое использование
Angular HTTP клиента в нашем угловом приложении.
Давайте посмотрим немного деталей HTTP-клиента в этой лекции.
Как мы и ожидали,
Angular использует протокол HTTP для обеспечения связи между
нашим Угловым клиентом и сервером на основе HTTP.
Большинство современных браузеров, обычно используемых для поддержки
XMLHttpRequest или XHR способа связи с сервером.
Все чаще браузеры принимают Fetch API,
, который является современной заменой XMLHttpRequest как
способом обеспечения связи между браузером и сервером.
Angular использует это для связи с сервером с помощью HTTP-клиента.
Мы рассмотрим использование HTTP-клиента и как мы можем использовать HttpClientModule,
в нашем угловом приложении, чтобы включить связь между клиентом и сервером.
Любая связь между клиентом и сервером, как мы ожидаем,
будет асинхронным по своему характеру.
Итак, что означает, что ваш клиент должен
ждать, пока данные будут доставлены с сайта сервера.
Следовательно, ваш клиент должен быть настроен
, чтобы справиться с этой задержкой в получении данных.
В самом предыдущем модуле
мы уже настроили наши клиентские приложения на
быть в состоянии показать прогресс счетчика в пользовательском интерфейсе,
держать пользователя в курсе того, что есть задержка в получении данных,
до представления визуализируется.
Что приходит нам на помощь в этом уроке
, где мы, очевидно, должны иметь дело с задержкой для получения данных с сайта сервера.
Доступ к данным в рамках нашего углового приложения
всегда лучше делегировать эту ответственность сервису.
Итак, мы позволяем сервису заниматься взаимодействием с сервером
, а затем ваш компонент получает данные, вызвав методы сервиса.
Взаимодействие службы компонентов, которое мы уже настроили в предыдущем модуле.
Итак, все, что нам нужно сделать,
это обновить наши услуги, чтобы использовать модуль HTTP для связи с сервером,
для получения данных с сервера, а затем,
предоставить данные компоненту.
Сам HTTP сервер,
вернет данные нашему клиенту и
наш модуль HTTP возвращает данные к нашему сервису в последующем наблюдаемом.
Этот наблюдаемый, будет затем обработан и
затем возвращен как наблюдаемый к нашему компоненту.
Эту часть мы уже настроили в предыдущем модуле.
Таким образом, мы будем использовать это, чтобы позволить нам быстро
проскальзывания HTTP-связи между клиентом и сервером,
между службой и сайтом сервера,
, а затем остальная часть инфраструктуры
, которая уже на месте в нашем угловом приложении
может легко справиться с доставка наблюдаемого к нашему компоненту,
и компонент, уже подписанный на этого наблюдателя.
Дополнительный эффект, с которым мы будем иметь дело,
- это как обрабатывать ошибки.
Мы поговорим об этом чуть более подробно в последующих слайдах.
Итак, как я уже упоминал,
HTTP-клиент возвращает наблюдаемый.
Итак, когда вы вызываете модуль HTTP,
, чтобы вы настроили свой сервис, чтобы использовать модуль HTTP,
и с модулем HTTP,
он предоставляет вам несколько методов, которые соответствуют get,
put, post и удалить глаголы протокола HTTP.
Таким образом, методы get, put, post,
и delete автоматически поддерживаются модулем HTTP.
Таким образом, вы будете использовать эти методы, чтобы иметь возможность выполнять
те конкретные операции на сайте сервера.
Итак, когда вы выполняете вызов HTTP get,
вы запрашиваете доставку данных с сервера клиенту.
HTTP-клиент, в свою очередь,
будет обрабатывать наблюдаемые, которые доставляются через модуль Угловой HTTP,
, а затем доставлять это наблюдаемое нашему компоненту.
В рамках нашего компонента, мы уже подписываемся
на наблюдаемый, который доставляется нашим сервисом,
и поэтому обработка данных, которые отправляются через наблюдаемый,
является довольно прямой для нас.
Если угловое приложение
взаимодействует с сервером, который возвращает ответ в формате JSON,
Angular HTTP клиенты получают сам метод
анализирует ответ сервера JSON в анонимный объект.
Сам клиент, точно не знает, как интерпретировать форму этого объекта.
Таким образом, мы можем помочь HTTP-клиенту, указав форму объекта,
, указав объявление класса JavaScript,
которые определяют форму объекта, так что вывод
из get может быть легко потреблен приложением.
Итак, в упражнении
вы увидите, как я объявляю.
Например, скажем это.http.get,
, а затем в угловых скобках,
я укажу блюдо там.
Таким образом,
входящие данные для запроса get с сайта сервера будут преобразованы в
объект блюдо, а затем могут быть потреблены немедленно
моим компонентом, когда он выкладывает контент.
Теперь, если вам требуется,
вы можете получить доступ к полному ответу, поступающей с сайта сервера.
Но это было бы только при определенных обстоятельствах,
, где вам нужен доступ к например,
заголовки входящего сообщения HTTP ответа и так далее.
Но для большинства целей
просто объявив форму объекта,
мы можем легко получить данные JSON автоматически разобраны в способ
, который может быть потреблен нашим угловым приложением более легко.
Как мы и ожидаем, связь
между клиентом и сервером не будет без ошибок.
Ошибки будут возникать по разным причинам.
Может быть, что соединение не устанавливается между клиентом и сервером,
это может быть тот факт, что ответ с сервера теряется,
это может быть тот факт, что сервер не может найти данные, которые вы ищете,
и поэтому возвращает 404, указывающий, что сервер
не может предоставить данные для вас или отсутствующие данные на сайте сервера и так далее.
Таким образом, ваш клиент должен иметь дело со всеми этими ошибками.
Итак, в рамках нашего сервиса
мы собираемся настроить наш сервис, чтобы иметь возможность поймать эту ошибку.
Таким образом, здесь использование метода catch, который поддерживается HTTP,
позволяет нам поймать ошибку, обработать эту ошибку,
, а затем отправить сообщение об ошибке нашему компоненту,
, а затем позволить компоненту справиться с сообщением об ошибке в
каким бы то ни было образом это казалось целесообразным.
Теперь, в рамках нашего компонента, например,
мы будем отображать информацию об ошибке, которую мы
получили на наш взгляд, чтобы указать пользователю,
, что произошла ошибка при получении данных с сайта сервера.
Итак, в рамках сервиса
нам нужно обработать эту ошибку.
Теперь, когда эта информация об ошибке, полученная от
сайта сервера через HTTP-клиент, обрабатывается в рамках нашего сервиса,
, тогда мы преобразуем это в строку,
и эта строка будет передана нашему компоненту с помощью наблюдаемого метода броска.
Таким образом, метод throw позволяет нам выбросить ошибку.
Тогда, потому что в нашем компоненте мы
подписываемся на этот наблюдаемый в рамках метода подписки,
то вам нужно иметь дело с ошибкой.
Итак, в части подписки
ранее мы видели только одну функцию, указываемую для подписки,
и которая имеет дело с нормальной работой.
Но вместе с этим
мы также можем предоставить вторую функцию, к которой будет доставлена ошибка.
Итак, вы увидите, что я настраиваю подписку части моего компонента
, используя вторую функцию, указанную в методе subscribe,
в качестве примера, иллюстрированного этим кодом здесь.
Таким образом, ошибка будет поймана в пределах
моего компонента, а затем соответствующее сообщение об ошибке,
информация будет доставлена пользователю в представлении.
Итак, мы увидим это как часть второго упражнения в этом конкретном уроке.
С этим быстрым пониманием HTTP клиента,
мы теперь перейдем к упражнениям, где мы будем использовать
Угловой HTTP-клиент, предоставляемый через модуль HTTP библиотеки Angular HTTP,
, чтобы позволить нам общаться с нашим сервером.