Asynchronous function inside asynchronous function

Question

I have this block of code in a function:

this.apiService.fetchCategories(!this.cacheData).subscribe(
    response => {
        if(this._jsnValService.valCategories(response)) {
            this.customerMap.categories = this.formatCategories(response["categories"]);
        } else {
            alert("Categories failed the schema validation. Please contact support if this happens again.");
        }
    },
    error => {
        this.notification.title = "Oops, there's a problem.";
        this.notification.content = "Seems there's an issue getting the provider categories.";
        this.notification.show("provider_categories_api");
    }
);

It fetches some data and then runs a validation on the data (if(this._jsnValService.valCategories(response)) {).

However, my validation of the data is actually async too, because it validates it against a json schema which is in a seperate json file so it has to read the file first.

I have used a promise to read the file contents and then do the validation:

 @Injectable()
 export class ValidateJSONSchemaService {

     constructor(private http: Http) {}

     public valCategories(json) {
         this._getSchema("./jsonSchema.categories.json").then((schema) => {
             this._valSchema(json, schema);
         });
     };

     private _valSchema(json, schema): any {
         var ajv = new Ajv();
         var valid = ajv.validate(schema, json);
         if (!valid) {
             console.log(ajv.errors);
             return false;
         } else {
             console.log(valid);
             return true;
         };
     };

     private _getSchema(fileName): any {
         return new Promise((resolve, reject) => {
             this.http.get(fileName)
                 .map(this._extractData)
                 .catch(this._handleError)
                 .subscribe(schema => resolve(schema));
         });
     };

     private _extractData(res: Response) {
         let body = res.json();
         return body.data || {};
     };

How can I edit the top code block in this question to account for the asynchronous function inside the if statement (if(this._jsnValService.valCategories(response)) {)?

for a start, you need valCategories to return a Promise, or accept a callback argument - as it is, you have no chance of changing the top block to use that function - by the way, what language is the second block? it's not javascript — Jaromanda X
@JaromandaX I'm using typescript. Sorry for the misleading es6-promise tag. I'll be returning to this question tomorrow at work and try it out, with the bottom code block in the answer below. Cheers — BeniaminoBaggins

damianfabian damianfabian · Accepted Answer · 2017-01-19T03:53:38

if you are using ES6 you could use async/await like this:

async function _validateCategories() {
  this.apiService.fetchCategories(!this.cacheData).subscribe(
    response => {
        const valid = await this._jsnValService.valCategories(response)
        if(valid) {
            this.customerMap.categories = this.formatCategories(response["categories"]);
        } else {
            alert("Categories failed the schema validation. Please contact support if this happens again.");
        }
    },
    error => {
        this.notification.title = "Oops, there's a problem.";
        this.notification.content = "Seems there's an issue getting the provider categories.";
        this.notification.show("provider_categories_api");
    }
  );
}

if not, your function fetchCategories should return a promise or allow you to pass a callback to do something like this:

async function _validateCategories() {
  this.apiService.fetchCategories(!this.cacheData).subscribe(
    response => {
        this._jsnValService.valCategories(response).then((error, valid)=> {
        if(error) {
            alert("Categories failed the schema validation. Please contact support if this happens again.");
        }
        this.customerMap.categories = this.formatCategories(response["categories"]);
        })
    },
    error => {
        this.notification.title = "Oops, there's a problem.";
        this.notification.content = "Seems there's an issue getting the provider categories.";
        this.notification.show("provider_categories_api");
    }
  );
}

Asynchronous function inside asynchronous function

1 Answers