Promise 完成问题答案

【问题标题】：Trouble with Promises completingPromise 完成问题
【发布时间】：2019-01-28 20:35:21
【问题描述】：

用户将单击一个按钮，该按钮将调用：

private _saveJobCreate(): void {
  if ((this.state.jobToCreate.TruckLookUpId && this.state.jobToCreate.TruckLookUpId !== undefined) &&
    (this.state.jobToCreate.DeliveryDate && this.state.jobToCreate.DeliveryDate.length > 0)) {
    console.log("valid input, should save");

    this._createJob(this.state.jobToCreate)
      .then(() => {
        console.log("job created and should be fetched, hiding panel");
        this._hideJobCreatePanel();
      });
  }
}

调用此方法：

private _createJob(newJob: IDeliveryJob): Promise < void > {
  console.log("creating job");
  let promise: Promise < void > = new Promise < void > ((resolve, reject) => {
    this.props.deliveryJobService.createJob(newJob)
      .then(() => {
        console.log("job created, fetching jobs");
        this._fetchJobs()
          .then(() => {

          });
      });
  });
  return promise;
}

这将从 Sharepoint 列表中获取我的工作：

private _fetchJobs(): Promise < void > {
  console.log("fetching jobs");
  let promise: Promise < void > = new Promise < void > ((resolve, reject) => {
    this.props.deliveryJobService.getDeliveryJobs()
      .then((newJobs: IDeliveryJob[]) => {
        console.log("jobs fetched, setting state");
        this.setState({
          jobs: newJobs
        });
      });
  });
  return promise;
}

问题是它停止设置状态，我看到的最后一个 console.log 是：

获取作业 DeliveryJobService.ts:59 response.json: ƒ (){return this.nativeResponse.json()} DeliveryJobService.ts:63 response.value: (24) [{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{… }，{…}， {…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}] TruckDeliverySchedule.tsx: 已获取 503 个作业，正在设置状态

所以，看起来最后一个方法_fetchJobs() 没有返回它的Promise，所以第一个方法可以调用_hideJobCreatePanel()。

我是 typescript/javascript 开发的新手，我不明白为什么最后一个 Promise 没有返回。

【问题讨论】：

标签： javascript typescript promise es6-promise

【解决方案1】：

你永远不会 resolve 或 reject - 将你的任何一个承诺，更何况你已经陷入了 anti-pattern 在你自己的承诺中包装完美的承诺。

例如，而不是这个：

private _fetchJobs(): Promise<void> {
    console.log("fetching jobs");
    let promise: Promise<void> = new Promise<void>((resolve, reject) => {
      this.props.deliveryJobService.getDeliveryJobs()
      .then((newJobs: IDeliveryJob[]) => {
        console.log("jobs fetched, setting state");
        this.setState ({
          jobs: newJobs
        });
      });  
    });

    return promise;
}

你应该这样做：

private _fetchJobs(): Promise<void> {
    console.log("fetching jobs");
    return this.props.deliveryJobService.getDeliveryJobs()
      .then((newJobs: IDeliveryJob[]) => {
        console.log("jobs fetched, setting state");
        this.setState ({
          jobs: newJobs
        });
      });  
}

当您在_createJob 中执行此操作时，不要忘记返回链式承诺：

 private _createJob(newJob: IDeliveryJob): Promise<void> {
    console.log("creating job");
    return this.props.deliveryJobService.createJob(newJob)
      .then(() => {
        console.log("job created, fetching jobs");
        return this._fetchJobs() // HERE!
          .then(() => {

          });
      });  
  }

您的每个方法都应该返回承诺，而不是将其包装在新的承诺中，然后您的问题将不再存在……而且您可以将调用链接起来，这使得代码更具可读性。

【讨论】：

【解决方案2】：

问题是你在不需要的地方使用了 Promise 构造函数。

private _fetchJobs(): Promise<void> {
      console.log("fetching jobs");
      return this.props.deliveryJobService.getDeliveryJobs().then((newJobs: IDeliveryJob[]) => {
         console.log("jobs fetched, setting state");
         this.setState ({
           jobs: newJobs
         });
       });

  }

【讨论】：