How to make the function wait until response comes back

Question

I am trying to add this response data to a zip object and later calling the createZip() method to download file as a zip file. Problem is my file getting downloaded first and the response is coming back. If I try to run the function again then right file is getting downloaded because in the previous API call I already got the response data.

Can anyone help me with this. I am new to angular and don't know how to use async/await properly.

zipFile = new JSZip();
exportIcsReportInJSONFormat() {
    this.icsService.getICSReport()
        .subscribe(response => {
                    console.log("JSONFile",response)
                    this.jsonFile = response;
                    this.zipFile.file("ics-report_.json", response, {binary:true});
        });

To create zip file and download.

createZip() {
    this.zipFile.generateAsync({type:"blob"})
          .then(function(content) {
          saveAs(content, "example.zip");
          });
  }

Answer 1

You can use the async/await pattern with Promises, something like this:

  zipFile = new JSZip();

  async mapZip() {
    try {
      var response = await this.exportIcsReportInJSONFormat();
      console.log("JSONFile", response)
      this.jsonFile = response;
      this.zipFile.file("ics-report_.json", response, { binary: true });
      var content = await this.zipFile.generateAsync({ type: "blob" });
      saveAs(content, "example.zip");
    }
    catch {
      ...
    }

  }

  exportIcsReportInJSONFormat() {
    this.icsService.getICSReport().toPromise();
  }