Question

在发出AJAX请求的每个模块中，都使用加载程序映像来阻止内容，直到请求完成为止。大多数模块执行一到三个请求，因此我们的解决方案是使用多个回调。当我遇到一个进行八个单独调用的组件时，我立即着手寻找一种更好的方法并发现了forkJoin。使用forkJoin要求我们更改处理请求的方式。这是代码更改的一个很好的例子：

之前：

ngOnInit() {
    this.showLoader();
    this.getUsers(() => {
        this.onSearch();
    });
}

getUsers(callback: Function) {
    return this.userService.getUsers()
        .subscribe(
            data => {
                this.users = data;
                callback();
            }
            error => this.showError('Error getting Users', error)
        );
}

onSearch(view?: string) {
    this.showLoader();
    // parameter related logic

    return this.expenseService.search(view)
        .subscribe(
            data => {
                this.results = data;
                this.hideLoader();
            }
            error => this.showError('Error getting Expenses', error)
        );
}

之后：

ngOnInit() {
    this.showLoader();

    forkJoin([
        this.getUsers(),
        this.onSearch()
    ]).subscribe(
        data => {
            this.users = data[0];
            this.results = data[1];
            this.hideLoader();
        },
        error => this.showError('Unexpected Error', error)
    );
}

getUsers() {
    return this.userService.getUsers();
}

onSearch(view?: string) {
    // parameter related logic
    return this.expenseService.search(view);
}

我对这些变化大部分感到满意；通用错误处理使我感到沮丧，因为我无法为失败的调用自定义TypeScript中的错误，因此必须调整我的API。真正的问题在于可重用的方法，例如onSearch()，我想在模块加载时和更改搜索字段时调用这些方法。我唯一能想到的解决方案是在onSearch()请求完成后调用forkJoin：

ngOnInit() {
    this.showLoader();

    forkJoin([
        this.getUsers()
    ]).subscribe(
        data => {
            this.users = data[0];
            this.onSearch();
        },
        error => this.showError('Unexpected Error', error)
    );
}

getUsers() {
    return this.userService.getUsers();
}

onSearch(view?: string) {
    this.showLoader();
    // parameter related logic
    this.expenseService.search(view)
        .subscribe(
            data => {
                this.results = data;
                this.hideLoader();
            }
            error => this.showError('Error getting Expenses', error)
        );
}

稍有不同的是，可以使用单独的方法返回this.expenseService.search()，并且forkJoin和onSearch()都可以使用它，但是感觉没有必要。

ngOnInit() {
    this.showLoader();

    forkJoin([
        this.getUsers(),
        this.getExpenses()
    ]).subscribe(
        data => {
            this.users = data[0];
            this.results = data[1];
            this.hideLoader();
        },
        error => this.showError('Unexpected Error', error)
    );
}

getUsers() {
    return this.userService.getUsers();
}

getExpenses(view?: string) {
    // parameter related logic
    return this.expenseService.search(view);
}

onSearch(view: string) {
    this.showLoader();
    this.getExpenses(view)
        .subscribe(
            data => {
                this.results = data;
                this.hideLoader();
            }
            error => this.showError('Error getting Expenses', error)
        );
}

我对Angular还是比较陌生，所以也许我不知道可以利用forkJoin或订阅方面的某些信息。有没有比我列出的两个选项更好的方法？

Answer 1

您可以通过许多不同的方式来执行此操作。一种方法是从.git中提取forkJoin部分，并传入您要使用的实际方法。例如：

ngOnInit

然后您可以在getData(methods) { this.showLoader(); forkJoin(methods).subscribe({ error: error => this.showError('Unexpected Error', error), complete: () => this.hideLoader(), }); }中使用它：

ngOnInit

...和// arrow function used to keep lexical binding this.getData([() => this.getUsers(), () => this.getExpenses()]);：

onSearch

为了更新结果，您可以更新您的检索功能观测值。例如：

this.getData([() => this.getExpenses(view)]);

在Angular中使用forkJoin时可重复使用的搜索

1 个答案: