Advertisement
  1. Code
  2. Angular
Code

Водич за почетници за Angular 4: HTTP

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Beginner's Guide to Angular 4.
Beginners Guide to Angular 4: Routing

Macedonian (Македонски јазик) translation by Marija Poposka (you can also view the original English article)

Во претходниот водич видовте како се применува насочување кај Angular веб апликациите користејќи Angular насочување.

Во овој водич ќе научите како да комуницирате со веб APIs (интерфејси за програмирање апликации) и услуги од апликацијата Angular користејќи Angular HttpClient .

Angular HttpClient

Го користите објектот XMLHttpRequest(XHR) за да направите повици од страна на серверот од API-то на пребарувачот. Објектот XHR овозможува да ажурирате дел од веб-страницата без одново да ја вчитате целата страница. Можете да праќате и примате податоци од серверот откако ќе се вчита веб-страницата.

Angular HttpClient обезбедува обвивка за објектот XHR , што го олеснува правењето API повици од апликацијата Angular.

Од официјалната документација:

Со HttpClient , @angular/comon/http обезбедува поедноставен API за HTTP функционалност за употреба со Angular апликации, градење на врвот на интерфејсот XMLHttpRequest изложен од пребарувачите. Дополнителните придобивки од HttpClient вклучуваат: поддршка за тестирање, добро пишување на објектите за барања и одговори, поддршка за пресретнувачи на барања и одговори, и подобра обработка на грешки преку APIs базирани на Observables.

Да започнеме

Ќе започнете со клонирање на изворниот код од првиот дел од водичите.

Откако ќе го имате изворниот код, одете до директориумот на проектот и инсталирајте ги потребните зависности.

Откако ќе се инсталираат зависностите, стартувајте ја апликацијата со пишување на следнава наредба:

Треба да продолжите со апликацијата на http://localhost:4200/

Со цел да се користи модулот HttpClient на вашата Angular апликација, прво мора да го внесете во вашата app.module.ts датотека.

Од директориумот на проектот, одете до src/app/app.module.ts . Во app.module.ts датотеката внесете HttpClientModule .

Вклучете го HttpCliendModule под делот за внесување.

Еве како изгледа датотеката app.module.ts :

Сега ќе можете да го користите HttpCliendModule преку апликацијата Angular со тоа што ќе го внесете во посебна Angular компонента.

Креирање на Angular компонента

Да започнеме со креирање на Angular компонента. Креирајте папка наречена get-data во src/app папката. Креирајте датотека наречена get-data.component.ts и додадете го следниов код:

Креирајте датотека наречена get-data.component.html која што ќе служи како образец за делот get-data . Додадете го следниов код за датотеката get-data.component.html :

Внесете го GetDataComponent во src/app/app.module.ts датотеката.

Додадете GetDataComponent на ngModule во app.module.ts.

Еве како изгледа изменетата app.module.ts датотека:

Додадете го get-data селекторот на компоненти на датотеката app.component.html. Еве како тоа изгледа:

Зачувајте ги гореспоменатите промени и стартувајте го серверот. Ќе може да го видите делот get-data прикажан на екранот кога ќе се вчита апликацијата.

Get Data Component

Користење на модулот Angular HttpClient

Ќе го користите модулот HttpClient за да остварите API повици. Да креираме одделна датотека за  креирање на Angular услуга за остварување API повик. Креирајте датотека наречена get-data.service.ts. Додадете го следниов код на get-data.service.ts датотеката:

Внесете го модулот HttpClient на горенаведениот GetDataService.

Иницијализирај го HttpClient во конструкторот GetDataService.

Креирајте метод наречен call_api за да направите GET API повик во датотеката GetDataService. Ќе направите употреба на API-збор за пребарување на синоним за да го направите API повикот. Еве како изгледа методот call_api :

Еве како изгледа датотеката get-data.service.ts:

Како што се гледа во горенаведената класа GetDataService, методот call_api се враќа видлив на кој може да се претплатите од GetDataComponent.

За да се претплатите од конструкторот на GetDataComponent, мора да внесите GetDataService во GetDataComponent.

GetDataService дефинирајте го како давател на GetDataComponent.

Да се претплатиме од методот на конструктор на GetDataComponent.

Еве како изгледа датотеката get-data.component.ts:

Зачувајте ги горенаведените измени и престартирајте го серверот. Резултатот ќе може да го видите најавен во конзолата на пребарувачот.

Во горниот код, видовте како да направите барање за GET API користејќи го Angular HttpClient.

За да направите POST барање, треба да го користите методот http.post.

Како што видовме во горенаведениот код, треба дa дадете URL на објавувањето на API и податоците да бидат објавени како втор параметар.

Обработка на грешки при остварување API повици

Кога и да направите API повик, постои можност да наидете на грешка. За да се справите со грешките при правење API повик, треба да додадете управувач за грешки на методот за претплата заедно со одговорниот управувач.

Еве како изгледа изменетиот код од GetDataComponent:

Променете го менливиот url во get-data.service.ts датотека за да креирате непостоечки URL кој би предизвикал грешка при правењето API повик.

Зачувајте ги гореспоменатите измени и престартирајте го серверот. Проверете ја конзолата на пребарувачот и ќе го повикате методот за управување со грешки и најавената грешка.

Објектот за грешка ги содржи сите детали за грешки како што се идентификаторот на грешка, порака за грешка, итн. Тоа дава подлабок увид во тоа како настанала грешката со API повикот. Еве како изгледа дневникот на конзолата на пребарувачот:

Error Handler Angular HttpClient

Како што се гледа во погорниот дневник на конзолата, сите детали за грешките можат да се добијат од објектот за грешка.

Да сумираме

Во овој водич видовте како да го користите Angular HttpClientModule за правење API повици. Научивте како да го внесите HttpClientModule за правење GET и POST барања до API-то на серверот. Видовте како да се справите со грешките при правење API повик.

Како беше вашето искуство обидувајќи се да научите како да направите API повик користејќи HttpClientModule? Споделете го со нас вашето мислење во коментарите подолу.

Изворниот код од овој водич е достапен на GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.