ПредишенСледващото

Любовта на интерфейса

Ако вземете едно нещо е споменато в много форуми реагират или на интерфейса като цяло, това ще бъде един въпрос: как да направите заявка AJAX да реагира на приложения.

Най-голямото объркване - това е, което наистина често реагират изтъквани като freymvork, и хората, които са работили с freymvorkami като ъглови свикнали да работим с API повиквания, с неща като $ помощници като HTTP и библиотеки, предлагани от ъглови. Ако това е случаят с реагират различно, защото реагират - това е метода "само" за управление на оглед библиотека статус и жизнения цикъл.

Е, как да се направи заявка AJAX ако bibiloteka не ви дава това с изваждането от кутията?

Имате право да използва свободно 3-та страна библиотеки (други малки bibilioteki решаване на определени проблеми). Можете да използвате въвеждането на собствен браузър донесе (може да искате да се включат WHATWG извличане Polyfill. Изважда да подкрепи по-стари браузъри) или да използвате Аксиос. Аз лично предпочитам последния, както Аксиос има прост API и работи в повечето браузъри.

Всичко, което трябва да се работи с Аксиос върху, за да знаят как да работят promisses - дори и ако някога сте се използва jQuery.ajax, тогава вие вече разбирате какво и как.

Нека обясним принципите на използване на обикновена молба GET:

Ние otpravyalem GET заявка към конкретна URI и logiruem отговор. Аксиос вече предполага, че отговорът ще бъде JSON обект, така че ние не трябва да посочите допълнителни опции.

Както можете да видите, създавайки искане AJAX да реагира не е много по-различен от създаването си през JQuery или ъглови. Истинският въпрос е - не е.

Когато или когато правите заявка AJAX?

Когато се развиват вашата кандидатура и работния процес, трябва да се мисли предварително как да изпращате / получавате данни, за да се уреди (поток от данни) в приложението си:

  • Кой от компонентите ще бъде в състояние да изпрати заявка за данни?
  • Тъй като данните ще бъдат предадени на други компоненти?
  • Тя ще се продава повече от едно действие, което може да бъде полезен и в други случаи (изтеглите повече информация за пост в тази страница, изтегляне на информацията за подобни позиции основния дисплей страница)?

Тук имаме няколко добри начини за "най-добра практика" за решаването на този проблем, където да се използва заявка AJAX:

componentWillMount

Вашият компонент, както е в нашия пример ще се подпори, съдържащ ID на статията и да отправи искане за изтегляне на данни. Вашата кандидатура може да изглежда по следния начин:

В случай, че отговор (реакция), за предаване на ИД като подпори, нашата компонент ще изпрати AJAX заявка и след това, в метода направи () компонент се проверява дали данните (данни) в ustavnoleny състояние, съдържанието се изобразява.

Изглежда, че това е идеалното решение за тока, но също така се счита за анти-модел, тъй като сега ние имаме възвишеното до компонента на контейнера, който е свързан с показването на елемента в изпълнението му, той umenshaetsya повторна употреба на компонента.

Primichaniya Превод: В този случай, трябва да се разбира, че ако например ще използва публикацията в блога компонент на друго място, ние също ще трябва да се премине на идентификационен номер на статия, и всеки компонент е всеки път да се направи заявка AJAX за да получите някои данни, които са свързани с него.

Преносът на данни от компонента родител чрез подпори

Вместо да правим компонента родител, компонент ние ще прехвърли всички данни по линията като подпори и ние ще направим всичко родител компонент получава данни. Това се осъществява главно под формата на URL адрес, промени в действията на потребителя в рутера реагира-.

Когато използвам понятието за компонент, пак трябва да се има предвид, забележката на предишния метод на заявка за AJAX към обвързващ елемент за неговото прилагане. Трябва да се избягва употребата на множество контейнери / интелигентни компоненти в молбата Ви.

използване състояние мениджър като поток, Redux или mobx.

В допълнение към решението да бъде бонус, че сега сме в състояние да направи искане AJAX от всяка точка на приложението, което ни хареса (когато промените URL адреса, в componentWillMount метода, по време на събитието на сървъра чрез гнезда), и когато стигнем нашите данни и да им даде до магазина, нашите компоненти, съответно, също са актуализирани.

Приложение 2 - да го направи красив

Сега, когато знаем как да получите данни чрез API, трябва да сме сигурни, че потребителят знае, че нещо се е случило. За това малко ще коригира направи () метод:

Благодарение да се провери дали има данни, можем да се реши дали да се показва съдържанието на потребителя, или да показвате това съдържание още се зарежда. Един пример за прилагането на настоящото решение:

Тя изглежда по-добре, нали? Виж тук е: фейсбук-съдържание-контейнер-деконструкцията. За да разберете как Facebook се присмива на Великия пост, докато товарите. Разбира се можете да добавите някакъв предварително зареждане на това, което искате

Свързани статии

Подкрепете проекта - споделете линка, благодаря!