我不知道為什么我的 http 請求在我的 angular 項目中不起作用？

Question

我用 node.js 創建了一個 RESTful API，當我用郵遞員測試它時，它工作正常並顯示正確的結果。

但我的問題是來自我的角度應用程序的請求。 當我發送請求時，API 中沒有反應，似乎根本沒有向服務器發送請求！

我的 API 網址是：

http://localhost:3000/api/menus/menujsonexport

當我通過郵遞員發送請求時，它會正確返回一個 json。

這是我的角度請求腳本：

private requestMenu(type: 'listsidemenu'): Observable<any> {
  let base;
  if (type === 'listsidemenu') {
    base = this.http.get<any>('http://localhost:3000/api/menus/menujsonexport'
            , { headers: { Authorization: `Bearer ${this.getToken()}` }});
  }

  const requestMenu = base.pipe(
    map((data: any) => {
      return data;
    })
  );
  return requestMenu;
}

我用這個方法調用了請求：

public fetchjsonmenu() {
  this.authserv.listSideMenu()
  .pipe(
    finalize(() => {console.log('finished'); }),
    tap(x => {
      console.log(x);
    })
  );
}

但是在我的 nodejs API 中沒有反應。

你有什么主意嗎？

如果沒有信息可以回答這個問題，請告訴我。

Answer 1

Observable 實例僅在有人訂閱它時才開始發布值。 您可以通過調用實例的 subscribe() 方法進行訂閱，傳遞一個觀察者對象來接收響應。

.subscribe不是 Angular2 的東西。

這是一種來自 rxjs 庫的方法，Angular 在內部使用它。

如果您可以想象自己在訂閱時事通訊時和訂閱后，每次有新時事通訊時，他們都會將其發送到您的家中（調用 subscribe 中的方法）。

這就是訂閱雜志來源時發生的情況（他們在rxjs庫中稱之為Observable ）

Angular 中的所有 AJAX 調用都在幕后使用這個庫，為了使用它們中的任何一個，你必須使用方法名稱，例如 get，然后調用 subscribe ，因為 get 返回和 Observable。

此外，當您執行此操作時<button (click)="doSomething()"> Angular 在幕后使用Observables並向您訂閱該事物的來源，在這種情況下是click事件。

回到我們對Observables和newsletter stores類比，在您訂閱后，只要有新雜志，他們就會將其發送給您，除非您去取消訂閱它們，否則您會發生這種情況”必須記住訂閱號或 ID，在 rxjs 中它會像：

let subscription = magazineStore.getMagazines().subscribe(
   (newMagazine)=>{

         console.log('newMagazine',newMagazine);

    }); 

當你不想再買雜志時：

   subscription.unsubscribe();

同樣，同樣適用於

 this.route.paramMap

這是返回一個Observable然后你訂閱它。

我個人的觀點是rxjs是被帶到 JavaScript 世界的最偉大的東西之一，它在 Angular 中甚至更好。

有150〜 rxjs方法（非常類似於lodash方法）和一個您使用的是被稱為switchMap

Answer 2

您需要在 get 調用后在代碼中添加.subscribe() 。有關更多信息，請查看鏈接。 所以，現在你的腳本應該看起來像這樣。

  let base;
  if (type === 'listsidemenu') {
    base = this.http.get<any>('http://localhost:3000/api/menus/menujsonexport'
            , { headers: { Authorization: `Bearer ${this.getToken()}` }}).subscribe();
  }

  const requestMenu = base.pipe(
    map((data: any) => {
      return data;
    })
  );
  return requestMenu;
}```