代码之家  ›  专栏  ›  技术社区  ›  Etibu

让观察者发出第一个“状态”,而不是等待之前的状态完成

  •  1
  • Etibu  · 技术社区  · 6 年前

    我想实现以下目标: 我在初始化过程中有多个步骤,每个步骤都是可观察的。 每个步骤都应该通过 下一步() 调用,其中的内容显示在角度模板中。

    问题是所有步骤都应该有一个初始状态,这样用户至少可以看到所有步骤,即使它们还没有被订阅。

    有没有办法做到这一点?或者我需要将可观察到的数据从显示的数据中分离出来并更改每个数据上的数据吗 下一步()

    编辑: 因为似乎很难理解我想要达到的目标,我试着用一个例子来解释: , 任务2 , 任务3 进行中 完成 ). 当然,每个任务的描述从一开始就应该是可见的,即使有些任务还没有被订阅。上一个任务一完成,下一个任务就应该开始了。任务的更新应该通过 下一步() 召集每个可观察到的人。

    // This is how a basic task should look like
    interface Task {
         description: string,
         progressMessage: string,
         status: 'running' | 'idle' | 'complete',
         children: Task[],
         task: Observable<TaskStatus>
    }
    // This should be the format of each next call
    interface TaskStatus {
        progressMessage?: string,
        status?: 'running' | 'idle' | 'complete'
    }
    // Wait for each task, on complete run next one, is there a better way ?
    private async runTasks(): Promise<void> {
        for (let task of this.tasks) {
            await new Promise((resolve, reject) => {
                task.task.subscribe({
                    next: (taskStatus: TaskStatus) => {
                        if (taskStatus.status) {
                            task.status = taskStatus.status;
                        }
                        if (taskStatus.progressMessage) {
                            task.progressMessage = taskStatus.progressMessage;
                        }
                    },
                    error: (error: Error) => {
                        console.log(error);
                        reject(error);
                    },
                    complete: () => resolve()
                });
            });
        }
    }
    private registerNewTask(description: string, taskFactory: () => Observable<TaskStatus>): void {
        const taskObservable: Observable<TaskStatus> = taskFactory();
        const newTask: Task = {
            description: description,
            progressMessage: '',
            status: 'idle',
            children: [],
            task: taskObservable
        };
        this.tasks.push(newTask);
    }
    private task1(): Observable<TaskStatus> {
        return Observable.create((observer: Observer<TaskStatus>) => {
            observer.next({ progressMessage: 'Started', status: 'running' });
            setTimeout(() => {
                observer.next({ progressMessage: 'Finished', status: 'complete' });
                observer.complete();
            }, 10000);
        });
    }
    
    private task2(): Observable<TaskStatus> {
        return Observable.create((observer: Observer<TaskStatus>) => {
            observer.next({ progressMessage: 'Started', status: 'running' });
            setTimeout(() => {
                observer.next({ progressMessage: 'Finished', status: 'complete' });
                observer.complete()
            }, 10000);
        });
    }
    

    这是我找到的唯一方法。有没有更好的方法来处理任务的执行? 海螺 似乎不起作用,因为我需要了解整个 对象中的 调用订阅,所以我需要手动迭代每个订阅,并用一个承诺等待。

    0 回复  |  直到 6 年前