如何"完全"关闭页面

Question

我正在使用getData函数向rest API发出请求(请参阅代码(。如果由于某种原因请求失败，我会再次调用 getData 函数，直到它成功。

问题是：如果我弹出页面，请求仍然会被发送(循环仍将运行(。

如何关闭页面以停止代码执行？现在我正在使用 pop 关闭页面。

// Imports ...
export class RecipePage {
    constructor(public navCtrl: NavController, public navParams: NavParams, private http: HttpClient)
    {
        this.getData();
    }
    getData() {
        this.http.get('http://localhost:8000/get/recipes')
            .subscribe(
                data => {
                    console.log(data);
                },
                error => {
                    console.log('retrying ...');
                    // !! This loop continues after the page is popped !!
                    setTimeout( () => {
                        this.getData();
                    }, 2000);
                },
            );
    }
}

Answer 1

您可以在

离开该页面时使用clearTimeout清除该setTimeout：

// Imports ...
export class RecipePage {
    private timeout: any;
    constructor(...) {}
    ionViewWillEnter() {
        // Try to get the data when entering to the page
        this.getData();
    }
    ionViewWillLeave() {
        // Clear the timeout to prevent making request after leaving the page
        if(this.timeout) {                
            clearTimeout(this.timeout);
        }
    }
    getData() {
        this.http.get('http://localhost:8000/get/recipes')
            .subscribe(
                data => {
                    console.log(data);
                },
                error => {
                    console.log('retrying ...');
                    if(this.timeout) {
                        // Prevent multiple setTimeouts at the same time
                        clearTimeout(this.timeout);
                    }
                    // Store a reference in the timeout property
                    this.timeout = setTimeout(() => { this.getData(); }, 2000);
                },
            );
    }
}

另请注意以下几点：

1. 不建议在constructor中发出 http 请求。使用 IonViewWillLoad/IonicViewWillEnter/...或任何其他生命周期钩子
2. 当您在请求中收到错误时，请检查是否已运行 setTimeout，然后再创建新请求。这样，您可以避免同时运行多个设置超时。
3. 使用 setTimeout 不是重试 http 请求失败的最佳方法。请查看此博客文章，了解如何使用 RxJs 重试 Http 请求