Angular9 http.get() 給出未定義

Question

我搜索了更多關於這個論點的結果，但沒有一個答案對我有幫助。 I trying to do an http.get() in angular, using an url from firebase: https://firestore.googleapis.com/v1/projects/angularfirebasegb/databases/(default)/documents/cart?key=AIzaSyDNW48hAmvH8eAZpbeflRKb0khY5Blzsqg

正如您可以嘗試的那樣，它可以返回 json。我嘗試了不同的方式，但結果仍然是“未定義”。 現在我正在嘗試這種模式：

 import { Injectable } from '@angular/core'; // install rxjs first: npm install rxjs-compat --save import { Observable } from 'rxjs/Observable'; import { BookModel } from '../../models/book/book.model'; import { Subject } from 'rxjs/Subject'; import { AngularFirestore } from '@angular/fire/firestore'; //import { AngularFirestore } from 'angularfire2/firestore'; // se non presente: npm install @angular/http@latest import { Http } from '@angular/http'; //import { HttpClient } from '@angular/common/http'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class CartService { private emitAddToCart = new Subject<any>(); addEmitted$ = this.emitAddToCart.asObservable(); // http requests (https://firebase.google.com/docs/firestore/use-rest-api) example of httprequest hardCodeUrl = 'https://firestore.googleapis.com/v1/projects/angularfirebasegb/databases/(default)/documents/cart?key=AIzaSyDNW48hAmvH8eAZpbeflRKb0khY5Blzsqg'; constructor(private db: AngularFirestore, private http: Http) { } query() { // promise // take values stored in cart in Firebase return this.db.collection('/cart').valueChanges(); } add(data){ // this is going to put some items into an item collection, storing data in firebase let item = this.db.collection<BookModel>('/cart').add(data.getData()); // next is going to do all the save for us (but the name is a quite strange) this.emitAddToCart.next(item); return item; } emitChange(book: BookModel) { this.emitAddToCart.next(book); } httpCall() { debugger; // return this.http.get(this.hardCodeUrl); return this.http.get(this.hardCodeUrl).pipe(map(data => {})).subscribe(result => { console.log("RISULTATO " +result); }); } }

並從另一個 class 調用 service.httpCall()，它打印“RISULTATO undefined”。 在此之前，我嘗試使用return this.http.get(this.hardCodeUrl); 以這種方式調用它：

service.httpCall().subscribe(data => {
  responseFromBackEnd = data;
});

但仍然未定義，事實上在此之后，做：

let jsonFromBackend = JSON.parse(responseFromBackEnd.text());

它給我錯誤原因未定義。 我不知道為什么。

更新：使用

return this.http.get(this.hardCodeUrl).subscribe(result => {
    console.log("RISULTATO", result);
});

它像這樣返回 object：

and.text() 返回空

Answer 1

您的 map pipe .pipe(map(data => {}))使其返回未定義：

return this.http.get(this.hardCodeUrl).subscribe(result => {
    console.log("RISULTATO", result);
});

這將返回每個 object。

map 運算符將給定項目 function 應用於源 Observable 發出的每個值，並將結果值作為可觀察值發出。 您正在獲取每個值並返回一個空的 object 作為結果。

我更喜歡從服務中返回 Observable：

httpCall() {
   return this.http.get(this.hardCodeUrl);
}

並從需要此值的組件訂閱它：

this.service.httpCall().subscribe((res) => {
   console.log("res", res);
});

如果您需要進行一些轉換，您仍然可以在服務器中進行並返回可觀察對象：

httpCall() {
  return this.http.get(this.hardCodeUrl).pipe(
    map((res: { documents: any }) => {
      return res.documents;
    })
  );
}

這將返回一個具有原始響應的文檔屬性值的可觀察對象。