Add fetch service

Author: irustm

package-lock.json

@@ -11,11 +11,11 @@ import { HttpFetchBackend } from '../lib/http-fetch-backend';
   declarations: [AppComponent, HelloComponent],
   imports: [NodeguiLibModule, HttpClientModule],
   providers: [
-    GithubService,
-    {
-      provide: HttpClient,
-      useFactory: () => new HttpClient(new HttpFetchBackend())
-    }
+    GithubService
+    // {
+    //   provide: HttpClient,
+    //   useFactory: () => new HttpClient(new HttpFetchBackend()) // TODO: not work
+    // }
   ],
   bootstrap: [AppComponent],
   schemas: [NO_ERRORS_SCHEMA]

src/app/app.module.ts

@@ -1,15 +1,15 @@
 import { Injectable } from '@angular/core';
+import { from } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
+import fetch from 'node-fetch';
 
 const API_URL = 'https://api.github.com';
 
 @Injectable({
   providedIn: 'root'
 })
 export class GithubService {
-  constructor(private http: HttpClient) {}
-
   getUser(username: string) {
-    return this.http.get(`${API_URL}/users/${username}`);
+    return from(fetch(`${API_URL}/users/${username}`).then(res => res.json()));
   }
 }

src/app/github.service.ts

@@ -1,3 +1,3 @@
 <view>
-  <text>{{ avatarUrl }}</text>
+  <text>{{ userName }}</text>
 </view>

src/app/hello/hello.component.html

@@ -17,7 +17,7 @@ import { Subscription } from 'rxjs';
 export class HelloComponent implements OnInit, OnDestroy {
   @Input() name;
 
-  public avatarUrl: string;
+  public userName: string;
 
   private subscribtion: Subscription;
 
@@ -27,8 +27,7 @@ export class HelloComponent implements OnInit, OnDestroy {
     this.subscribtion = this.github
       .getUser(this.name)
       .subscribe((data: any) => {
-        console.log(data);
-        this.avatarUrl = data.avatar_url;
+        this.userName = data.name;
       });
   }
 

src/app/hello/hello.component.ts

@@ -20,7 +20,7 @@ export class HttpFetchBackend extends HttpBackend {
         credentials: req.withCredentials ? 'same-origin' : undefined,
         headers: req.headers ? strMapToObj(req.headers) : undefined,
         body: req.body ? JSON.stringify(req.body) : undefined
-      })
+      }).then(res => res.json())
     );
   }
 }