Bagaimana cara mengembalikan respons dari panggilan Observable / http / async dalam bentuk angular?

Saya memiliki layanan yang mengembalikan pengamatan yang melakukan permintaan http ke server saya dan mendapatkan datanya. Saya ingin menggunakan data ini tetapi saya selalu mendapatkannya undefined. Apa masalahnya?

Layanan :

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

Saya memeriksa Bagaimana cara mengembalikan respons dari panggilan asinkron? posting tetapi tidak dapat menemukan solusi

Alasan:

Alasannya undefinedadalah karena Anda membuat operasi asinkron. Artinya akan membutuhkan waktu untuk menyelesaikan getEventListmetode ini (sebagian besar bergantung pada kecepatan jaringan Anda).

Jadi mari kita lihat panggilan http.

this.es.getEventList()

Setelah Anda benar-benar membuat ("api") permintaan http subscribeAnda dengan Anda akan menunggu respon. Sambil menunggu, javascript akan mengeksekusi baris di bawah kode ini dan jika bertemu dengan tugas / operasi sinkron itu akan segera mengeksekusinya.

Jadi setelah berlangganan getEventList()dan menunggu tanggapannya,

console.log(this.myEvents);

baris akan segera dieksekusi. Dan nilainya adalah undefinedsebelum respons datang dari server (atau ke apa pun yang telah Anda inisialisasi sebelumnya).

Ini mirip dengan melakukan:

ngOnInit(){
    setTimeout(()=>{
        this.myEvents = response;
    }, 5000);

    console.log(this.myEvents); //This prints undefined!
}

Jadi bagaimana kita mengatasi masalah ini? Kami akan menggunakan fungsi panggilan balik yang merupakan subscribemetode. Karena ketika data datang dari server itu akan berada di dalam subscribedengan respon.

Jadi mengubah kodenya menjadi:

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

akan mencetak tanggapan .. setelah beberapa waktu.

Mungkin ada banyak hal yang harus dilakukan dengan tanggapan Anda selain hanya mencatatnya; Anda harus melakukan semua operasi ini di dalam callback (di dalam subscribefungsi), saat data tiba.

Hal lain yang perlu disebutkan adalah jika Anda berasal dari Promiselatar belakang, thencallback sesuai subscribedengan observable.

Anda tidak boleh mencoba mengubah operasi asinkron menjadi operasi sinkronisasi (Anda tidak bisa). Salah satu alasan kami memiliki operasi asinkron adalah untuk tidak membuat pengguna menunggu operasi selesai sementara mereka dapat melakukan hal lain dalam jangka waktu tersebut. Misalkan salah satu operasi asinkron Anda membutuhkan waktu 3 menit untuk menyelesaikan, jika kami tidak memiliki operasi asinkron, antarmuka akan berhenti selama 3 menit.

Bacaan yang Disarankan:

Kredit asli untuk jawaban ini adalah: Bagaimana cara mengembalikan tanggapan dari panggilan asinkron?

Namun dengan rilis angular2, kami diperkenalkan dengan skrip ketikan dan observable sehingga jawaban ini diharapkan mencakup dasar-dasar penanganan permintaan asinkron dengan observable.

Melakukan panggilan http dalam angular / javascript adalah operasi asinkron. Jadi ketika Anda membuat panggilan http, utas baru akan ditetapkan untuk menyelesaikan panggilan ini dan memulai eksekusi baris berikutnya dengan utas lain. Itulah mengapa Anda mendapatkan nilai yang tidak terdefinisi. jadi buat perubahan di bawah ini untuk mengatasi ini

this.es.getEventList()  
      .subscribe((response)=>{  
       this.myEvents = response;  
        console.log(this.myEvents); //<-this become synchronous now  
    });

Kamu bisa memakai asyncPipe jika Anda menggunakan myEvents hanya di template.

Berikut contoh dengan asyncPipe dan Angular4 HttpClient contoh

Yang bisa diamati itu malas jadi Anda harus berlangganan untuk mendapatkan nilainya. Anda berlangganan dengan benar dalam kode Anda tetapi secara bersamaan mencatat output di luar blok 'berlangganan'. Itulah mengapa ini 'tidak ditentukan'.

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

  console.log(this.myEvents); //Outside the subscribe block 'Undefined'
}

Jadi jika Anda masuk ke dalam blok berlangganan maka itu akan mencatat respons dengan benar.

ngOnInit(){
  this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //Inside the subscribe block 'http response'
    });
}

Berikut masalah ini, Anda menginisialisasi this.myEventske subscribe()yang merupakan blok asynchronous saat Anda melakukan console.log()hanya keluar dari subscribe()blok. Jadi console.log()dipanggil sebelum this.myEventsdiinisialisasi.

Harap pindahkan kode console.log () Anda juga di dalam subscribe () dan selesai.

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

Hasilnya tidak terdefinisi karena proses sudut async. Anda bisa mencoba seperti di bawah ini:

async ngOnInit(){
    const res = await this.es.getEventList();
    console.log(JSON.stringify(res));
}

Pastikan juga Anda memetakan respons Anda ke keluaran json. Jika tidak, itu akan mengembalikan teks biasa. Anda melakukannya seperti ini:

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)=>{ return res.json();}) <!-- add call to json here
            .catch((err)=>{return err;})
}

Tidak ditentukan karena nilai di sini dicatat sebelum data apa pun dari layanan disetel dari panggilan layanan berlangganan di atas. Jadi Anda harus menunggu hingga panggilan ajax selesai dan mengatur data dari data respons.

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

Di sini membuat log Konsol di dalam metode berlangganan yang akan membuat log ketika data diatur dalam variabel myEvents.

ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
     // This prints the value from the response
    console.log(this.myEvents)
        }); 
  }

Anda cukup mencoba metode ini-

let headers = new Headers({'Accept': 'application/json'});
let options = new RequestOptions({headers: headers});

return this.http
    .get(this.yourSearchUrlHere, options) // the URL which you have defined
    .map((res) => {
        res.json(); // using return res.json() will throw error
    }
    .catch(err) => {
        console.error('error');
    }