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

所以在订阅 'process' 中，实例变量 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 块之外的变量是空的，导致您进行异步调用（AJAX），因此您在订阅之外的代码将在请求到来之前执行背部。一旦调用返回（成功与否），执行的代码将是 .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 如果您还想捕获错误响应，请将新函数设置为您订阅函数的第二个参数：

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

希望对你有帮助！！

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

Angular's HTTP subscribe method not correctly assigning instance variables

subscribe

typescript

angular