V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
anonymous2351d00
V2EX  ›  Angular

问:来个精通 Angular 的大哥帮忙看一段代码

  •  
  •   anonymous2351d00 · 2022-10-31 17:48:55 +08:00 · 2168 次点击
    这是一个创建于 752 天前的主题,其中的信息可能已经有所发展或是发生改变。
     codeRun(code: string): void {
        if (!this.viewState.source || !this.viewState.source.id) return;
        this.toolbarState.loading.run = true;
        this.toolbarState.enable.stop = true;
        this.viewTableState.loading = true;
        const param: ViewTestExecute = {
          sourceId: this.viewState.source.id,
          scriptType: 'SQL',
          size: this.toolbarState.limit.value,
          script: code,
          variables: [],
          columns: [],
          countTotal: true
        };
        this.dataProviderService
          .execute(param)
          .pipe(
            catchError(exception => {
              this.toolbarState.loading.run = false;
              this.toolbarState.enable.stop = false;
              this.viewTableState.loading = false;
              throw exception;
            })
          )
          .pipe(takeUntil(this.destroy$))
          .subscribe((result: QueryResult) => {
            this.viewState.execute = param
            this.toolbarState.loading.run = false;
            this.toolbarState.enable = {run: true, stop: false, save: true, setting: false, copy: false};
            this.viewTableState = {...result, loading: false};
          });
      }
    

    如上面这段代码,因为页面的标签例如 <spin [spining]='xxxloading'></spin>这样,有一个加载状态,但是用

    this.loading = true
    this.http.get().subscribe(xx=>this.loading=false)
    

    这种改变 loading 状态的代码,感觉弄得我代码很不干净,有没有什么方法能尽量让改变页面状态代码精简些,让我的代码干净些

    9 条回复    2022-11-01 15:07:03 +08:00
    anonymous2351d00
        1
    anonymous2351d00  
    OP
       2022-10-31 17:49:56 +08:00
    十分困扰(艹皿艹 ),i can't write some cleancode
    Aloento
        2
    Aloento  
       2022-10-31 17:55:20 +08:00   ❤️ 2
    前端要那么干净干什么((( hhhhhhhhhhhhhhhhhhh
    yuyanggongzi
        3
    yuyanggongzi  
       2022-10-31 17:57:59 +08:00   ❤️ 1
    用管道
    this.http.get().pipe(tap(() => this.loading=false)).subscribe()
    charlie21
        4
    charlie21  
       2022-10-31 18:41:42 +08:00 via iPhone   ❤️ 1
    服务和组件状态解耦,是很对的

    组件状态都是本地状态而已,在回调里更新。具体可以是 pipe tap 里或 subscribe 里。

    however, 如果想要更 neat, 在不借助第三方库的情况下,可考虑让服务直接返回一个 loading$ observable , 视图里直接用 async pipe 打印之。逻辑挪到了服务里,组件直接消费服务

    <spin [spining]="isLoading$ | async"></spin>

    参考 https://www.thinktecture.com/en/angular/understanding-the-async-pipe/
    anonymous2351d00
        5
    anonymous2351d00  
    OP
       2022-11-01 11:35:26 +08:00
    @yuyanggongzi 假设 this.http 抛出异常了,tap 可不可以正确接收一个 error 呢,还是我还得 去 catchError 改变状态


    @charlie21 大佬平常使用哪种方法?显式调用然后改变状态还是 async 去调用返回 ob(true)/ob(false) ?
    anonymous2351d00
        6
    anonymous2351d00  
    OP
       2022-11-01 11:35:37 +08:00
    @Aloento 看着难受,红红火火恍恍惚惚
    lovepocky
        7
    lovepocky  
       2022-11-01 12:15:15 +08:00 via iPhone
    你难受的地方是页面逻辑耦合到服务调用里面了吧?
    那可以把服务调用的状态暴露出来一个 observable (比如 ishttpfetching$),然后页面去订阅它
    yuyanggongzi
        8
    yuyanggongzi  
       2022-11-01 13:59:49 +08:00
    @anonymous2351d00 异常我是在拦截器里面统一处理的,最后返回一个自定义的正常流
    beginor
        9
    beginor  
       2022-11-01 15:07:03 +08:00 via Android
    可以封装成 promise , 然后用 async await + try catch finally 解决
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3061 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 13:32 · PVG 21:32 · LAX 05:32 · JFK 08:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.