Ionic 2 Promise - 在执行第二个进程之前完成第一个进程答案

【问题标题】：Ionic 2 Promise - Finishing the first process before executing the second processIonic 2 Promise - 在执行第二个进程之前完成第一个进程
【发布时间】：2017-12-08 01:28:05
【问题描述】：

对于我的 Ionic 2 项目，我有两个函数一个接一个地执行。每个函数都包含一个 API 调用。我想等到第一个函数完成执行所有操作，然后再转到第二个函数。

我遇到的问题是，由于第一个函数需要一些时间才能完成，所以第二个函数在第一个函数完成执行之前执行。

我正在学习如何使用 Promise，因为有人告诉我它可以解决这个问题。我已经简化了代码，所以更容易理解：

const first = () => {
  self.pspService.post('/api/Conversation/GetPersonalCalendarData',
    {
    }, result => {
      result.Data.forEach(lAppointment => {
      });
    });

  return new Promise((resolve, reject) => {
    resolve();
  });

};

const second = () => {
  self.pspService.post('/api/Conversation/AddPersonalAppointment', {
  }, result => {

  });

  return new Promise((resolve, reject) => {
    resolve();
  });
};

first().then(() => {
  return second();
});

【问题讨论】：

我在我的第一个函数中添加了延迟，我的程序似乎可以运行。但这不是一种有效的方式：`return new Promise((resolve, reject) => { setTimeout(() => resolve(), 500); }); `

标签： angular typescript ionic-framework ionic2

【解决方案1】：

你可以把你的帖子放在new Promise:

const first = () => {
    return new Promise((resolve, reject) => {
        self.pspService.post('/api/Conversation/GetPersonalCalendarData', {
            }, result => {
                result.Data.forEach(lAppointment => {});
                resolve();
            });
    });

};

const second = () => {
return new Promise((resolve, reject) => {
    self.pspService.post('/api/Conversation/AddPersonalAppointment', {
        }, result => {
            resolve();
        });
});
};

first().then(() => {
     return second();
});

或者直接返回POST生成的promise

const first = () => {
    return self.pspService.post('url, {}, result => {
            result.Data.forEach(lAppointment => {});
            return Promise.resolve(result);
        })
}

【讨论】：

您的第一个代码 sn-p 为我工作。我只是放错了承诺包装器。

【解决方案2】：

使用新的 HttpClient 和 switchMap 获取唯一的 Observable

firstAndSecond(){
    return self.pspService.post('/api/Conversation/GetPersonalCalendarData')
          .switchMap((data:any)=>{
            //there you have "data", you can use to change the post
            return self.pspService.post('/api/Conversation/AddPersonalAppointment')
           });
}
//In your component
myService.firstAndSecond().subscribe((data2)=>{
    //data2 it's only the data from self.pspService.post
}

【讨论】：

【解决方案3】：

您可以使用 async/await 来处理此类场景。异步函数以 async 关键字为前缀； await 暂停执行，直到异步函数返回 promise 完成，并从返回的 Promise 中解包值。

async func(){
    const first = () => {
      self.pspService.post('/api/Conversation/GetPersonalCalendarData',
        {
        }, result => {
          result.Data.forEach(lAppointment => {
          });
        });

      return new Promise((resolve, reject) => {
        resolve();
      });

    };

    const second = () => {
      self.pspService.post('/api/Conversation/AddPersonalAppointment', {
      }, result => {

      });

      return new Promise((resolve, reject) => {
        resolve();
      });
    };

    let firstValue = await first();
    console.log("First Value", firstValue);
    let secondValue = await second();
    console.log("Second Value", secondValue);
  }

【讨论】：