减少重复的代码，尝试将函数分配给变量 - 不起作用

Question

为了减少重复的代码，我尝试创建一个if语句来为一个函数或另一个函数赋值，但这不起作用！？

我尝试做的是

const graphCall = (params['sfid'] === 'potential_engagements') ?  this.engagementService.potentialsGraph() : this.engagementService.graph()

语法本身不会抛出错误，但是当我尝试使用时

graphCall.then(animate => 

......它不起作用！我错过了什么，我可以不分配这些功能，有没有其他方式类似或不同的方式来检查和删除重复的代码？

我的代码：

if (params['sfid'] === 'potential_engagements') {
    this.engagementService.potentialEngagements = true;
    this.engagementService
      .potentialsGraph()
      .then(animate => {
        this.graph = new EngagementGraph(d3.select('.Engagement-GraphSVG'));
        this.track();
        this.engagementService.isGraph = true;
        this.engagementService
          .getAllProducts()
          .then(() => this.downloading = false)
          .catch(err => this.pdfError = true)
        this.findForumContact();
        this.updateDateLabel();
        this.addMemberPicture();
        this.setup(animate);
      })
      .catch(error => this.handleError(error));
} else {
    this.engagementService
      .graph(params['sfid'])
      .then(animate => {
        this.graph = new EngagementGraph(d3.select('.Engagement-GraphSVG'));
        this.track();
        this.engagementService.isGraph = true;
        this.engagementService
          .getAllProducts()
          .then(() => this.downloading = false)
          .catch(err => this.pdfError = true)
        this.findForumContact();
        this.updateDateLabel();
        this.addMemberPicture();
        this.setup(animate);
      })
      .catch(error => this.handleError(error));
}

谢谢，如果你能帮忙！

Answer 1

potential_engagements块有两件事，另一块没有：

this.engagementService.potentialEngagements = true; <------
this.engagementService
  .potentialsGraph() <------
  .then(animate => {

另一个块只有一个东西，另一个块没有：

this.engagementService
  .graph(params['sfid']) <------
  .then(animate => {

.then(animate和它后面的一切都是一样的，所以我建议将所有这些都抽象成一个函数，也许叫做handleGraphProm：

const handleGraphProm = prom => prom.then(animate => {
  this.graph = new EngagementGraph(d3.select('.Engagement-GraphSVG'));
  this.track();
  this.engagementService.isGraph = true;
  this.engagementService
    .getAllProducts()
    .then(() => this.downloading = false)
    .catch(err => this.pdfError = true)
  this.findForumContact();
  this.updateDateLabel();
  this.addMemberPicture();
  this.setup(animate);
})
.catch(error => this.handleError(error));

并称之为：

if (params['sfid'] === 'potential_engagements') {
  this.engagementService.potentialEngagements = true;
  handleGraphProm(this.engagementService.potentialsGraph());
} else {
  handleGraphProm(this.engagementService..graph(params['sfid']));
}

Answer 2

它不起作用的原因可能是因为你有一个额外的this.engagementService.potentialEngagements = true，它没有在三元操作中分配。把thenable和potentialsGraph返回的graph变为变量。然后打电话给then：

let graphCall;

if (params['sfid'] === 'potential_engagements') {
  this.engagementService.potentialEngagements = true;
  graphCall = this.engagementService.potentialsGraph()
} else {
  graphCall = this.engagementService.graph(params['sfid'])
}

graphCall.then(animate => {
    this.graph = new EngagementGraph(d3.select('.Engagement-GraphSVG'));
    this.track();
    this.engagementService.isGraph = true;
    this.engagementService
      .getAllProducts()
      .then(() => this.downloading = false)
      .catch(err => this.pdfError = true)
    this.findForumContact();
    this.updateDateLabel();
    this.addMemberPicture();
    this.setup(animate);
  })
  .catch(error => this.handleError(error));