Angular 生命钩子、setTimeout、http请求的执行顺序

最新推荐文章于 2024-11-20 22:11:14 发布

原创

最新推荐文章于 2024-11-20 22:11:14 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #http #javascript

本文详细探讨了Angular应用中组件生命钩子的执行顺序，并结合setTimeout和HTTP请求，分析了这些异步操作如何与生命钩子交织进行。通过对官方文档的引用，读者将理解在不同场景下，如何正确处理生命周期事件和异步任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Angular 生命钩子的执行顺序

https://angular.cn/guide/lifecycle-hooks#lifecycle-hooks

二、Angular 生命钩子、setTimeout、http请求等混合后的执行顺序

import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs/operators';

@Component({
    selector: 'my-test',
    templateUrl: './my-test.component.html'
})
export class MyTestComponent implements OnInit, OnChanges {
	constructor(private http: HttpClient) {}

    ngOnChanges(changes: SimpleChanges) {
        console.log('1 ngOnChanges');
    }

    ngOnInit() {
        console.log('2 ngOnInit');

        this.http
            .get(`${api}`)
            .pipe(
                finalize(() => {
                    console.log('8 Observable finalize');
                })
            )
            .subscribe(
                () => {
                    console.log('7 Obser