Question

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

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：ƒ（）{返回 this.nativeResponse.json（）} DeliveryJobService.ts：63 response.value：（24）[{{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{… }，{…}， {…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}] TruckDeliverySchedule.tsx：已获取503个作业，设置了状态

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

我对Typescript / javascript开发还很陌生，我不知道为什么最后一个Promise没有返回。

Answer 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(() => {

          });
      });  
  }

您的每个方法都应返回诺言，而不是将其包装到新的诺言中，这样您的问题将不再存在...此外，您可以将调用链接在一起，这使代码更具可读性。

Answer 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
         });
       });

  }

承诺完成的麻烦

2 个答案: