如何重构 API 调用的 if else 语句？

Question

我有一个搜索按钮，根据用户选择的选项，将触发相应的 API 调用。但是我现在有一堆 if else 语句。

所以我的问题是，我可以重构它吗？但是没有开关盒？

 searchFor() {
    if (this.selectedSearch === 'Registratie') {
      this.extendedSearchService
        .filerByRegistration(this.selectedValue, this.startDate)
        .subscribe(filterByRegistration => {
          this.filterparticipant.emit(filterByRegistration);
        });
    }

    if (this.selectedSearch === 'Chat') {
      this.extendedSearchService.filterByChat(this.startDate).subscribe(filterByChat => {
        this.filterparticipant.emit(filterByChat);
      });
    }

    if (this.selectedSearch === 'Inlog') {
      console.log('INlog');
      this.extendedSearchService.filterByInlog(this.startDate).subscribe(filterByInlog => {
        this.filterparticipant.emit(filterByInlog);
      });
    }

    if (this.selectedSearch === 'QrCode') {
      this.extendedSearchService
        .filterByQrCodes(this.selectedValue, this.startDate, this.selectedQrcode)
        .subscribe(fitlerByQrCode => {
          this.filterparticipant.emit(fitlerByQrCode);
        });
    }

    if (this.selectedSearch === 'Doelen') {
      this.extendedSearchService
        .filerByChallenge(this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie)
        .subscribe(filterByChallenge => {
          this.filterparticipant.emit(filterByChallenge);
        });
    }

    if (this.selectedSearch === 'Vcheq') {
      this.extendedSearchService
        .filterByVchecCode(this.selectedValue, this.startDate, this.selectedVcheqOption)
        .subscribe(filterByVcheqCode => {
          this.filterparticipant.emit(filterByVcheqCode);
        });
    }
  }

谢谢

我现在是这样的:

 searchFor() {
    const filter = (method, params) => {
      this.extendedSearchService[method](...params).subscribe(filter => {
        this.filterparticipant.emit(filter);
      });

      const filters = {
        Registratie: filter('Registratie', [this.selectedValue, this.startDate]),
        Chat: filter('Chat', [this.startDate]),
        Inlog: filter('Inlog', this.startDate),
        QrCode: filter('QrCode', [this.selectedValue, this.startDate, this.selectedQrcode]),
        Doelen: filter('Doelen', [
          this.selectedValue,
          this.startDate,
          this.selectedValueOptie,
          this.selectedValueProgressie
        ]),
        Vcheq: filter('Vcheq', [this.selectedValue, this.startDate, this.selectedVcheqOption])
      };

      if (filters[this.selectedSearch]) {
        filters[this.selectedSearch]();
      }
    };
}

它可以编译，但过滤器不起作用。

如果我这样做：

 searchFor() {
    const filter = (method, params) => {
      this.extendedSearchService[method](...params).subscribe(filter => {
        console.log('Filter');
        this.filterparticipant.emit(filter);
      });
    };

我收到这个错误：

ExtendedSearchComponent.html:90 ERROR TypeError: Cannot read property 'apply' of undefined
    at filter (extended-search.component.ts:211)
    at

这一行：

 this.extendedSearchService[method](...params).subscribe(filter => {
        console.log('Filter');

我是这样的：

searchFor() {

      const filter = (method, params) => {
        this.extendedSearchService[method](...params).subscribe(filter => {
          console.log(method);
          this.filterparticipant.emit(filter);
        });
      };

      const filters = {
        Registratie: filter('filterByRegistration', [this.selectedValue, this.startDate]),
        Chat: filter('filterByChat', [this.startDate]),
        Inlog: filter('filterByInlog', [this.startDate]),
        QrCode: filter('filterByQrCodes', [this.selectedValue, this.startDate, this.selectedQrcode]),
        Doelen: filter('filerByChallenge', [this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie]),
        Vcheq: filter('filterByVchecCode', [this.selectedValue, this.startDate, this.selectedVcheqOption]),
     }

      if (filters[this.selectedSearch]) {
        filters[this.selectedSearch]();
      }
    }

然后我得到这个错误：

ExtendedSearchComponent.html:88 ERROR TypeError: Cannot read property 'apply' of undefined
    at filter (extended-search.component.ts:213)
    at ExtendedSearchComponent.push../src/app/participant/components/extended-search/extended-search.component.ts.ExtendedSearchComponent.searchFor (extended-search.component.ts:220)
    at Object.eval [as handleEvent] (ExtendedSearchComponent.html:91)
    at handleEvent (core.js:19628)
    at callWithDebugContext (core.js:20722)
    at Object.debugHandleEvent [as handleEvent] (core.js:20425)
    at dispatchEvent (core.js:17077)
    at core.js:17524
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

好的，我做了一些调试。

并把这个：

 console.log('Method', method);

但后来我看到调用了多个方法：

Method filterByRegistration
extended-search.component.ts:214 Method filterByInlog
extended-search.component.ts:214 Method filterByChat

当然不是必须的。一次只有一个 api 呼叫。

Answer 1

您可以创建一个对象，将属性作为搜索类型，将函数作为值。

这是其工作原理的示例

var searchObject = {
  optionA: function(){
    console.log('Option A')
  },
  optionB: function(){
    console.log('Option B')
  }
}

function search(option){
  searchObject[option]()
}

search('optionA')
search('optionB')

这是您的代码 看起来像 的片段，我没有跟上 angular 所以它可能 this.searchObject 取决于在你定义它的地方，但概念是一样的

var searchObject = {
  Registratie: function() {
    this.extendedSearchService
      .filerByRegistration(this.selectedValue, this.startDate)
      .subscribe(filterByRegistration => {
        this.filterparticipant.emit(filterByRegistration);
      });
  },
  Chat: function() {
    this.extendedSearchService.filterByChat(this.startDate).subscribe(filterByChat => {
      this.filterparticipant.emit(filterByChat);
    });
  }
}



searchFor() {
  searchObject[this.selectedSearch]()
}

Answer 2

做一些动态的，这样你就可以避免一一检查

const filter = (method, params) => {
  this.extendedSearchService[method](...params).subscribe(filter => {
     this.filterparticipant.emit(filter);
  });
};

const filters = {
   Registratie: filter('filterByRegistration', [this.selectedValue, this.startDate]),
   Chat: filter('filterByChat', [this.startDate]),
   Inlog: filter('filterByInlog', [this.startDate]),
   QrCode: filter('filterByQrCodes', [this.selectedValue, this.startDate, this.selectedQrcode]),
   Doelen: filter('filerByChallenge', [this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie]),
   Vcheq: filter('filterByVchecCode', [this.selectedValue, this.startDate, this.selectedVcheqOption]),
}

if(filters[this.selectedSearch]) {
   filters[this.selectedSearch]();
}

Answer 3

post 中的最新版本代码在初始化 const filters 时调用了六次 filter。但是 filter 只应在 searchFor 末尾的 if 语句中调用一次。

实现此目的的一种方法是在 filters 对象中同时记录方法名称和参数，并修改 filter 以获取方法及其参数。例如：

function searchFor() {

  const filter = (using) => {
    this.extendedSearchService[using.method](...using.params).subscribe(filter => {
      console.log(using.method);
      this.filterparticipant.emit(filter);
    });
  };

  const filters = {
    Registratie: { method: 'filterByRegistration', params: [this.selectedValue, this.startDate]},
    Chat: { method: 'filterByChat', params: [this.startDate]},
    Inlog: { method: 'filterByInlog', params:  [this.startDate]},
    QrCode:{ method: 'filterByQrCodes', params: [this.selectedValue, this.startDate, this.selectedQrcode]},
    Doelen: { method: 'filerByChallenge', params: [this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie]},
    Vcheq: { method: 'filterByVchecCode', params: [this.selectedValue, this.startDate, this.selectedVcheqOption]},
  }

  if (filters[this.selectedSearch]) {
    filter(filters[this.selectedSearch]);
  }
}

如何重构 API 调用的 if else 语句？

How do I refactor if else statements of API calls?

javascript

refactoring

angular