Bagaimana untuk Mengakses Data dengan Betul dari Sudut Dapat Diperhatikan Selepas Panggilan HTTP Tak Segerak?

Cara Mengembalikan Respons daripada Panggilan Observable/HTTP/Async dalam Sudut

Masalah:

Pulangan yang boleh diperhatikan data melalui panggilan tak segerak, tetapi mengakses data mengakibatkan tidak ditentukan kerana sifat tak segerak operasi.

Perkhidmatan:

@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)
  }
}

Komponen:

@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!
  }
}

Sebab:

Operasi async mengambil masa untuk diselesaikan, tetapi JavaScript melaksanakan kod segerak serta merta. console.log(this.myEvents); dilaksanakan sebelum data daripada pelayan diterima.

Penyelesaian:

Gunakan panggilan balik langgan untuk mengendalikan respons sebaik sahaja ia tiba:

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

Kesimpulan:

Kendalikan operasi tak segerak dalam panggilan balik atau melanggan fungsi untuk mengakses data selepas ia diterima. Ini memastikan bahawa data tidak tidak ditentukan atau batal.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Data dengan Betul dari Sudut Dapat Diperhatikan Selepas Panggilan HTTP Tak Segerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!