"Alert in Javascript executing prematurely prior to initiating the function for sending a get request

Question

"Alert in Javascript executing prematurely prior to initiating the function for sending a get request

private validateURL(url: string) {
    let isValid = false;
    this.$http.get(url).then(
        (data) => {
            console.log('success');
            isValid = true;
        }
    ).catch( 
        (reason) => {
            console.log('failure ' + reason);
            isValid = false;
        }
    ).then(
        () => {
            return isValid;
        }
    )
}
private checkURL() {
    if (!this.validateURL(url)) {
        alert('Incorrect URL');
        return false;
    }
}

The issue is that the alert in the if statement is being triggered before the validateURL function is called. How can I ensure that the function is invoked first?

angularjs typescript

Answer 1

Answer №1

Employ a promise to handle URL validation. The extended version, featuring the console.log statements, looks like this

private checkURLValidity(url: string) {
    return new Promise((resolve, reject) => {
        this.$http.get(url).then(
            (data) => {
                console.log('success');
                resolve();
            }
        ).catch(
            (reason) => {
                console.log('failure ' + reason);
                reject();
            }
        );
    }

private anotherMethod() {
    this.checkURLValidity(url).catch(){
        alert('Invalid URL provided');
        return false;
    }
}

Alternatively, opt for the concise version and directly utilize the promise returned by $http

private verifyURL(url: string) {
    return this.$http.get(url);
}    

private anotherMethod() {
    this.verifyURL(url).catch(){
        alert('Invalid URL provided');
        return false;
    }
}

Answer 2

Employ a promise to handle URL validation. The extended version, featuring the console.log statements, looks like this

private checkURLValidity(url: string) {
    return new Promise((resolve, reject) => {
        this.$http.get(url).then(
            (data) => {
                console.log('success');
                resolve();
            }
        ).catch(
            (reason) => {
                console.log('failure ' + reason);
                reject();
            }
        );
    }

private anotherMethod() {
    this.checkURLValidity(url).catch(){
        alert('Invalid URL provided');
        return false;
    }
}

Alternatively, opt for the concise version and directly utilize the promise returned by $http

private verifyURL(url: string) {
    return this.$http.get(url);
}    

private anotherMethod() {
    this.verifyURL(url).catch(){
        alert('Invalid URL provided');
        return false;
    }
}

Answer 3

Answer №2

Uncertain about the ts syntax, but here's a potential solution:

private checkValidURL(url: string) {
  return this.$http.get(url)
    .then(() => true, () => false);
}
private executeFunc() {
  this.checkValidURL(url)
    .then(isValid => {
      console.log(isValid ? 'URL is Valid' : 'URL is Invalid');
    });
}

Answer 4

Uncertain about the ts syntax, but here's a potential solution:

private checkValidURL(url: string) {
  return this.$http.get(url)
    .then(() => true, () => false);
}
private executeFunc() {
  this.checkValidURL(url)
    .then(isValid => {
      console.log(isValid ? 'URL is Valid' : 'URL is Invalid');
    });
}

"Alert in Javascript executing prematurely prior to initiating the function for sending a get request

Answer №1

Answer №2

Similar questions

Develop an rxjs pipeline that merges values according to their type prior to executing them in an async manner using concatMap

Expanding interfaces dynamically in Typescript

Tips for executing numerous asynchronous tasks in Ionic 3 and closing a loader once all tasks are completed

Issue detected in rxjs-compat operator's shareReplay file at line 2, column 10:

Exploring through angular.js with the use of identifiers

Unlock the power of Angular ViewChildren to access and manipulate SVG elements efficiently

Make simultaneous edits to multiple cells in IGX GRID for Angular

Steps for building a custom component using MUI as a foundation

Leveraging the AngularJS promise/defer feature alongside the Quickblox framework, learn how to efficiently upload images and subsequently upload public URLs to a custom

Angular Error: Trying to access a property on an undefined variable

Removing empty options from a select dropdown in Angular 9

An obstacle encountered when implementing feature module services in a controller for a Nest JS microservice

Ignore verification of unused parameters

Elevate the scope analysis for a function within the Jasmine framework

Guide on showing a component exclusively for iPads with React and TypeScript

mysterious supplier factoryprovider <- factory <- angular js controller

Encountering problem with React Typescript fetching data from Spring Data REST API: the error message "Property '_embedded' does not exist" is being displayed

Differentiating Service Class and Typescript Class in Angular 6

Leveraging require.ensure within webpack

Angular 11 now includes the ability to implement lazy loading for modules