В първата част на този урок постигнахме следното:
- Настройка на проекта
- Изграждане на основната функционалност за изпращане на заявки и получаване на отговори за GET и POST REST API крайни точки
- Прикачете персонализирано тяло на заявка към POST заявки
Ако все още не сте прочели част 1, силно се препоръчва да го направите, преди да продължите
В тази втора и последна част от урока ще надградим нашето приложение и ще добавим още две функции:
- Прикрепете персонализирани заглавки към заявките за API
- Запазване и зареждане на минали заявки, така че да могат да бъдат използвани повторно
Прикрепете персонализирани заглавки към заявките за API
Много пъти, или всъщност по-често, е необходимо да се прикачат заглавки към API заявки за цели като удостоверяване, като „x-api-key“. Добрата новина е, че външният вид и функционалността на персонализираните заглавки са много подобни на тези на тялото на персонализираната заявка за POST заявки. Като начало нека добавим потребителския интерфейс за тази функционалност и добро място за това би било като раздел до раздела Основно съдържание. Така че актуализираме раздела, както следва:
Както можете да видите, започваме с преместване на *ngIf в раздела към раздела, съответстващ на „Тяло“, тъй като може да са необходими заглавки на заявки в GET или POST заявки, за разлика от тялото на заявката. Освен това потребителският интерфейс е значително подобен и всъщност по-опростен от този на раздела Основно съдържание - тук не се нуждаем от поле за тип данни - това винаги е двойка ключ-стойност от низови стойности. Имаме и разпоредби за добавяне и премахване на елементи. Тук обаче добавяме задължително, непроменливо заглавие за Content-Type — това поле не може нито да се редактира, нито да се премахва.
След като потребителският интерфейс е премахнат, нека сега да разгледаме логическата част. Като начало трябва да добавим заглавки към функциите за обвивка, които дефинирахме в услугата. Трябва да добавим допълнителен параметър към двете функции и да конструираме заглавка, използвайки класа HttpHeader, предоставен от Angular. Завършеният main.service.ts сега ще изглежда така:
Сега, когато услугата е извън пътя, е време да добавите логиката на компонента. Добрата новина отново е, че можем да рециклираме функциите, които направихме за персонализираното тяло, като добавим контекстен параметър към наличните функции и връщаме резултати или извършваме съответно действия. За целта актуализираме api-params.component.ts, както следва:
И точно така, сега имаме и персонализирана функционалност на заглавката на заявката.
Запазване и зареждане на минали заявки
Нашето приложение вече отговаря на повече от достатъчно изисквания, за да работи като основен инструмент за разпитване на API. Една добра функция обаче ще бъде възможността за повторно използване на минали заявки. Това включва две части — запазване на заявките, които правим, и възможност за зареждането им, така че същата заявка да може да бъде направена отново. Тази функция има основно изискване за система за съхранение. Тъй като за тази версия на приложението, ние го поддържаме като чисто приложение за браузър, логичният избор е да изберете едно от множеството решения за съхранение, предоставени от браузъра. Най-очевидният избор би бил да използвате localStorage. Въпреки това, localStorage е базирано на низове хранилище. Това, от което в идеалния случай се нуждаем в този случай, е JSON хранилище на обекти. Поради това по-добрият и по-добър избор ще бъде използването на IndexedDB.
Като начало ще ни трябва компонент, който да показва миналите заявки и да ги зарежда. Ние го създаваме с помощта на CLI.
ng g c past-requests
Нека сега да разположим двата компонента върху основния компонент, компонента на приложението. След като бъде готово, ще изглежда така:
Това, което трябва да разберем на този етап е, че въпреки че повечето от съвременните браузъри го правят, все още има по-ранни версии на браузъри, които не поддържат IndexedDB API. И тъй като няма смисъл да имате компонента past-requests, ако браузърът не поддържа IndexedDB. По този начин, както може да се види, оформлението на страницата, както и изобразяването на компонента past-requests, се контролират от променливата hasIndexedDB, която ние ще бъде зададено на true или false въз основа на наличността на API в браузъра. Това е един от аспектите на прогресивните уеб приложения, където коригираме изобразеното приложение според разпоредбите на браузъра, в който работи.
Първата стъпка е да проверите дали браузърът поддържа IndexedDB API и добро място за изпълнение на проверката и задаване на променливата hasIndexedDB би бил методът OnInit на компонента на приложението.
Както е показано, ние извикваме функцията openIndexedDB от ngOnInit. Във функцията openIndexedDB първо проверяваме дали обхватът на браузъра; т.е. обектът window съдържа IndexedDB. Ако тази проверка е успешна, ние се опитваме да отворим екземпляр на IndexedDB. Ако това успее, манипулаторът onsuccess се задейства и това е мястото, където инициираме екземпляра indexedDB и задаваме променливата hasIndexedDB на true.
Ако приемем, че IndexedDB е отворена успешно, трябва да отворим обектно хранилище. Можем да използваме метода createObjectStore на екземпляра indexedDB за отваряне на магазина, както следва:
Методът създава ново хранилище на обекти с името ‘pastRequests’ или отваря същото, ако вече съществува от предишни екземпляри на изпълнение на приложението. Предадохме два атрибута като опции на метода. keyPath дефинира уникалния индекс, чрез който идентифицираме всеки запис в магазина, който създаваме/отваряме, докато autoIncrement: true автоматично добавя нов _id към всяко влизане в магазина, без да се налага да го задаваме ръчно.
Следващата стъпка е да запазите направените заявки. За целта се връщаме към компонента api-params.
Създадохме функция, която конструира requestObject въз основа на типа заявка. Този обект съдържа елементи от заявката, които искаме да запазим. След като обектът е готов, инициираме нова транзакция, където отваряме създаденото хранилище на обекти, ‘pastRequests’ в режим readwrite, тъй като трябва да напишем нови данни. Накрая добавяме създадения requestObject към хранилището на pastRequests. Единственото нещо, което остава да се направи, е да се извика функцията saveRequest в метода sendRequest.
Следващата част е извличане на запазените заявки за показване в нашия компонент минали заявки. За целта се връщаме към компонента приложение.
Тук използваме метода getAll, за да извлечем всички съхранени заявки. Останалата част от потока е подобна на добавяне на нов елемент към магазина за обекти. След това извикваме тази функция в манипулатора onsucess за отваряне на IndexedDB.
Сега трябва да добавим потребителски интерфейс и логика в компонента past-requests, за да предоставим извлечените заявки. Шаблонът за това ще изглежда така:
В логическата част на компонента, всичко, което трябва да направим, е да дефинираме вход за получаване на масива pastRequests от компонента app.
На този етап ще можем да видим всички заявки, които правим в този компонент.
Последната част, която трябва да направим, е да добавим функционалност за зареждане на предишна заявка. За да направим това, ние дефинираме събитието за щракване върху която и да е от изброените заявки, което излъчва събитие към компонента приложение.
Сега трябва да дефинираме функция в компонента api-params, за да заредим заявката. Ще се нуждаем и от функция за деконструиране на заглавките и основните обекти в масиви, така че да могат да се показват правилно.
Тъй като функцията е налице, всичко, което трябва да направим, е да я извикаме, когато се щракне върху минала заявка. Можем да направим това във функцията за обработка на събитието, излъчено от компонента past-requests. Тъй като компонентът api-params е дъщерен на компонента на приложението, можем да използваме декоратора @ViewChild за достъп до него и изпълнение на функцията. Завършеният компонент на приложението сега ще изглежда по следния начин:
Вече завършихме нашето приложение с всички планирани функционалности. Можете да видите пълния код на проекта в следното хранилище на Github.
Можете да видите приложението на живо на следния линк
Благодаря ви, че прочетохте.
Интересувате ли се от чат 1:1 с мен относно тази история или Angular, Typescript и Javascript като цяло? Преминете към Hire The Author и нека се свържем!
Следвайте ни в Twitter🐦и Facebook👥и Instagram📷 и се присъединете към нашите Facebook и Linkedin Групи💬.
За да се присъедините към чата на екипа на Slack в нашата общност🗣️ прочетете нашите седмични теми за Faun🗞️,и се свържете с общността📣щракнете тук⬇
