首頁 > web前端 > js教程 > 如何在非同步 HTTP 呼叫後正確存取 Angular Observable 中的資料?

如何在非同步 HTTP 呼叫後正確存取 Angular Observable 中的資料?

Patricia Arquette
發布: 2024-12-23 19:51:15
原創
992 人瀏覽過

How to Properly Access Data from an Angular Observable After an Asynchronous HTTP Call?

如何從 Angular 中的 Observable/HTTP/Async呼叫回傳回應

問題:

可觀察返回透過非同步呼叫取得數據,但由於非同步的本質,存取資料會導致未定義的結果

服務:

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}
登入後複製

組件:

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}
登入後複製

組件:

非同步操作需要時間才能完成,但 JavaScript 會執行立即同步程式碼。 console.log(this.myEvents);在接收到來自伺服器的資料之前執行。

解決方案:

this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //<-- not undefined anymore
    });
登入後複製

使用訂閱回呼來處理回應到達後的情況:

結論:

結論:結論:結論:結論:結論:結論:結論:處理非同步操作回呼或訂閱函數以在收到資料後存取資料。這可確保資料不是未定義或為空。

以上是如何在非同步 HTTP 呼叫後正確存取 Angular Observable 中的資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板