Schematics mogą być również asynchroniczne. Wyobraźmy sobie scenariusz, że Schematic wykonuje call do REST API i na podstawie odpowiedzi z konkretną encją, tworzy jej typ jako interfejs. W takiej sytuacji, Schematic będzie asynchroniczny z powodu wykonania zapytania Http.
W trakcie tutoriala, pisaliśmy Rules, które zwracają Tree. W przypadku asynchronicznych Schematics, chcemy zwrócić Observable<Tree>. Należy pamiętać, że skrypt jest odpalony na platformie Node, zatem nie mamy dostępu chociażby do window.fetch(url). Zatem aby móc wykonać zapytanie HTTP, instalujemy zależność node-fetch.
|
1 |
npm install node-fetch --save |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Rule, Tree } from '@angular-devkit/schematics'; import { Observable } from 'rxjs'; import * as fetch from 'node-fetch'; export function asyncType(options: any): Rule { const URL = 'https://jsonplaceholder.typicode.com/todos/1'; return (tree: Tree) => { const observer = new Observable<Tree>(obs => { fetch(URL) .then(res => res.json()) .then(response => { // zrób cokolwiek z danymi - np. na podstawie obiektu wygeneruj interfejs i wrzuć go pliku options.entity = response; obs.next(tree); obs.complete(); }) .catch((err: any) => obs.error(err)); }); return observer; }; } |
Jeśli umieścimy console.log z obiektem data, zobaczymy następujący log:
W środku then, możesz na przykład użyć biblioteki, która sprowadzi plain JS object do interfejsu TS, dzięki temu w bardzo prosty sposób uzyskujemy generator interfejsów na podstawie encji z BE. Taki obiekt z typami możemy wystawić sobie pod polem w options i wykorzytać go już w generowanym pliku.
Kod:
https://github.com/tomasznastaly/angular-schematics-tutorial/pull/12/files