How to make the function wait until response comes back - json

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