Angular的HTTP订阅方法没有正确分配实例变量

Question

 private getAllData(): void {
    this.stamm_solvara_jahrService.getAll().subscribe(resp => {
        const keys = resp.headers.keys();
        this.headers = keys.map(key=> `${key}: ${resp.headers.get(key)}`);
        this.stamm_solvara_jahrData = {...resp.body};

        console.log('Data inside method');
        console.log(this.stamm_solvara_jahrData);
        console.log('Header inside method'); 
        console.log(this.headers);
    });
    console.log('Data outside method');
    console.log(this.stamm_solvara_jahrData);
    console.log('Header outside method');
    console.log(this.headers);
}

因此，在订阅'进程'中，实例变量this.stamm_solvara_jahrData和this.headers都有值。除此之外，他们都是空的。怎么解决这个问题？

Answer 1

this.stamm_solvara_jahrService.getAll()是一种异步方法，这就是你必须在它上面调用subscribe的原因。

因此，当你的订阅回调被执行时，this.stamm_solvara_jahrData和this.headers将被定义，但是其余的代码（在订阅之外）不等待它发生，它只会尝试打印这两个变量，这将是仍然是undefined。

我强烈建议阅读有关asynchronous vs synchronous code的内容，以便更好地理解为什么这种事情会发生在像javascript这样的语言中。

Answer 2

它是正确的，因为在subscribe块外面，变量是EMPTY导致你做ASYNC CALL（AJAX）所以你的代码OUTSIDE订阅将在请求返回之前执行。 ONCE回调（成功与否）执行的代码将是.subscribe函数中的那个

    this.stamm_solvara_jahrService.getAll().subscribe(resp => {
            const keys = resp.headers.keys();
            this.headers = keys.map(key=> `${key}: ${resp.headers.get(key)}`);
            this.stamm_solvara_jahrData = {...resp.body};

            console.log('Data inside method');
            console.log(this.stamm_solvara_jahrData);
            console.log('Header inside method'); 
            console.log(this.headers);
        }); 

P.S如果你想要CATCH也错误响应设置一个新函数作为你订阅函数的第二个参数：

  this.stamm_solvara_jahrService.getAll().subscribe(resp => {
            const keys = resp.headers.keys();
            this.headers = keys.map(key=> `${key}: ${resp.headers.get(key)}`);
            this.stamm_solvara_jahrData = {...resp.body};

            console.log('Data inside method');
            console.log(this.stamm_solvara_jahrData);
            console.log('Header inside method'); 
            console.log(this.headers);
        }, 
(error)=>{ // <-- this one func catch the error from server
console.log(error)
}); 

希望这能帮到你!!