Bir Observable / http / async çağrısının yanıtını açısal olarak nasıl döndürürüm?

Sunucuma bir http isteği yapan ve verileri alan bir gözlemlenebilir olanı döndüren hizmetim var. Bu verileri kullanmak istiyorum ama her zaman elde ederim undefined. Sorun ne?

Hizmet :

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

Bileşen:

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

Kontrol ettim Eşzamansız bir aramadan gelen yanıtı nasıl geri getirebilirim? gönder ama bir çözüm bulamadım

Sebep:

Bunun nedeni, undefinedeşzamansız bir işlem yapıyor olmanızdır. Bu, getEventListyöntemi tamamlamanın biraz zaman alacağı anlamına gelir (çoğunlukla ağ hızınıza bağlı olarak).

Öyleyse http çağrısına bakalım.

this.es.getEventList()

Siz gerçekten ("ateş") yaptıktan sonra http talebiniz yanıt bekliyorsubscribe olacak . Javascript beklerken bu kodun altındaki satırları çalıştıracak ve eşzamanlı atamalarla / işlemlerle karşılaşırsa hemen çalıştıracaktır.

Yani, abone olduktan getEventList()ve yanıtı bekledikten sonra ,

console.log(this.myEvents);

satır hemen çalıştırılacaktır. Ve değeri undefined, sunucudan yanıt gelmeden öncedir (ya da ilk başta onu başlattığınız her şeye).

Yapmaya benzer:

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

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

Peki bu sorunu nasıl aşarız? subscribeYöntem olan geri arama işlevini kullanacağız . Çünkü veriler sunucudan geldiğinde subscribeyanıtı ile birlikte olacaktır .

Yani kodu şu şekilde değiştirmek:

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

yanıtı yazdıracak .. bir süre sonra.

Yanıtınız ile günlük tutmak dışında yapılacak birçok şey olabilir; subscribeveri geldiğinde tüm bu işlemleri geri arama içinde ( işlevin içinde ) yapmanız gerekir .

Söylenecek başka bir şey de, bir Promisearka plandan geliyorsanız , thengeri subscribearamanın gözlemlenebilirlere karşılık gelmesidir.

Eşzamanlı olmayan bir işlemi eşitleme işlemine değiştirmeye çalışmamalısınız (yapabileceğinizden değil). Eşzamansız işlemlere sahip olmamızın nedenlerinden biri, kullanıcıyı o zaman diliminde başka şeyler yapabilirken, bir işlemin tamamlanmasını bekletmemektir. Eşzamansız işlemlerinizden birinin tamamlanmasının 3 dakika sürdüğünü varsayalım, eşzamansız işlemler olmasaydı arayüz 3 dakika donacaktı.

Önerilen Okuma:

Bu cevabın asıl değeri şu şekildedir: Eşzamansız bir aramadan gelen yanıtı nasıl geri getirebilirim?

Ancak, angular2 sürümüyle birlikte daktilo ve gözlemlenebilirlerle tanıştık, bu nedenle bu yanıtın, gözlemlenebilirlerle eşzamansız bir isteği ele almanın temellerini kapsadığını umuyoruz.

Angular / javascript ile http çağrısı yapmak asenkron bir işlemdir. Dolayısıyla, http çağrısı yaptığınızda, bu çağrıyı bitirmek ve bir sonraki satırı başka bir evre ile yürütmek için yeni bir evre atayacaktır. Bu yüzden tanımsız bir değer elde ediyorsunuz. bu yüzden bunu çözmek için aşağıdaki değişikliği yapın

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

Sen kullanabilirsiniz asyncPipe yalnızca şablonda myEvents kullanırsanız.

AsyncPipe ve Angular4 HttpClient örneği ile burada örnek

Gözlemlenebilirler tembeldir, bu nedenle değeri almak için abone olmanız gerekir. Kodunuza düzgün bir şekilde abone oldunuz, ancak eşzamanlı olarak çıkışı 'abone' bloğunun dışında kaydettiniz. Bu yüzden 'tanımsız'.

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

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

Bu nedenle, abonelik bloğunun içine kaydederseniz, yanıtı doğru şekilde günlüğe kaydedecektir.

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

Burada sorun, sen başlatılıyor edilir this.myEventsiçine subscribe()yapıyorsun ederken hangi bir zaman uyumsuz blok console.log()sadece dışarı subscribe()bloğu. Yani console.log()önceden çağrılmak this.myEventsbaşlatılır.

Lütfen console.log () kodunuzu subscribe () içine de taşıyın ve bitirdiniz.

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

Sonuç tanımsızdır çünkü açısal süreç eşzamansızdır. aşağıdaki gibi deneyebilirsiniz:

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

Ayrıca yanıtınızı bir json çıktısına eşlediğinizden emin olun. Aksi takdirde düz metin döndürecektir. Bunu şöyle yaparsın:

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

Tanımlanmamıştır çünkü buradaki değer, hizmetten herhangi bir veri yukarıdaki abone hizmet çağrısından ayarlanmadan önce kaydedilir. Bu nedenle, ajax çağrısı bitene kadar beklemeniz ve verileri yanıt verilerinden ayarlamanız gerekir.

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

Burada, myEvents değişkeninde veri ayarlandığında günlüğü oluşturacak olan abonelik yöntemi içinde Konsol günlüğünü yapın.

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

Bu yöntemi deneyebilirsiniz.

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