如何將HttpRequest中的值直接返回到變量中

Question

我有個請求 ：

// api-service.ts
getUsers() {
    return this.http.get(this.BaseUrl + 'users/', httpOptions);
}

我想將結果設置為這樣的變量：

// users-component.ts
ngOnInit() { 
    this.users = this.api.getUsers();
}

目前我必須做這樣的事情：

// users-component.ts
ngOnInit() { 
    this.api.getUsers().subscribe(res => {
        this.users = res;
    })
}

我嘗試這樣的事情：

// api-service.ts
getUsers() {
    return this.http.get(this.BaseUrl + 'users/', httpOptions).pipe(
     map (res => { return res; })
    );
}

但它不起作用。

我只是想將此請求的結果設置為一個變量，而不使用我的變量所在的訂閱。

謝謝

Answer 1

實際上，您可能不想這樣做，但讓我解決這個問題。

如果您確實想這樣做：使用 Promises

您始終可以使用toPromise()函數將您的請求轉換為 Promise。 但：

Angular 是所有 Observable

Angular 已將 Observable 廣泛應用於其組件中，因此也應與這些組件一起使用。 通過這樣做，您可以獲得很多優勢。 例如，您不需要等待客戶端檢索請求的數據，而是可以做其他事情。

Observable 不像你希望的那樣工作

從httpClient返回的Observable （或任何與此相關的 Observable）不包含您想要獲取的值，它表示一旦任何subscription就可以發布數據流的管道。

這意味着除非訂閱，否則此流不會輸出任何數據。

如果您不想像上面那樣手動訂閱，因為您擔心內存泄漏和未關閉的訂閱，您可以使用AsyncPipe angular 提供。 這個管道為你訂閱一個 observable 並將其轉換為最新的交付值。

Answer 2

你可以這樣做：

// users-component.ts
async ngOnInit() { 
    this.user = await this.api.getUsers().toPromise();
}

編輯：

即使我為您的問題建議了toPromise()方式，我也不是所有 async-await 東西的粉絲。 Observables 結合 rxjs Operators 可以讓你成為魔術師。 學習曲線很高，但真的很有收獲。 我建議像@Chund 推薦的那樣存儲可觀察對象並使用異步管道訂閱它。