Как получить результат асинхронного вызова в области родительской функции

Question

Я новичок в угловом и использую angular 2 with typescript и имею проблему с помещением значений в переменные.

Также я видел машинопись документацию о let и это блок обзорное: https://www.typescriptlang.org/docs/handbook/variable-declarations.html

Но проблема может быть связана с third log вызывался перед тем second log, который является Ajax запрос вызова сервера.

Это мой код, где я использую let:

getData() { 
    let value : any; 
    console.log('first console log:'+value); 
    this.http 
     .get('api/get') 
     .map(response => response.json()) 
     .subscribe(response => { 
      value = response; 
      console.log('second console log:'+value); 
     }); 
    console.log('third console log:'+value); 
} 

И выход:

first console log:undefined 
third console log:undefined 
second console log:[object Object] 

Как я получить значение ответа в переменную?

Answer 1

Ваш вызов ajax является асинхронным. Таким образом, .subscribe() прибудет при разрешении вызова ajax. Третий console.log находится в главном потоке приложения и будет выполняться непосредственно после того, как вызов ajax будет запущен в другом потоке. Таким образом, ваше значение еще не начато.

Если бы вы написали этот код с помощью функции обратного вызова может быть более ясно, что происходит:

getData() { 
    let value : any; 
    this.http.get('api/get', (res, err) => { 
    value = res; 
    console.log('second console log:' + value); 
    }); 
    console.log('third console log:' + value); 
} 

раствора без Rx будет использовать обещание

getData() { 
    let value : any; 
    this.http.get('api/get') 
    .then(res => { 
     value = res; 
     console.log('second console log:' + value); 
    }); 
    console.log('third console log:' + value); 
} 

Но вы должны понимать его это просто лингво, чтобы скрыть обратный вызов и дать вам цельный код .then().

Настоящая проблема заключается в том, что третья консольная линия находится в основном потоке (когда вы входите в функцию getData()), и асинхронный код будет запланирован на другой поток для запуска в своем собственном темпе. Таким образом, третий консольный журнал никогда не будет согласован с этим кодом.

Исправление состоит в том, чтобы добавить третью консольную строку журнала в .subscribe(), .then() или обратный вызов по любому пути, который вы выберете.