tips for asynchronously loading cloud endpoints APIs

gapi.client.load('myapi1', 'v1', function() {
        gapi.client.load('myapi2', 'v1', function() {
             gapi.client.load('myapi3', 'v1', function() {
               $rootscope.$broadcast("All loaded")
             }, '/_ah/api');
            }, '/_ah/api');
        }, '/_ah/api');

Currently, the APIs are being loaded sequentially. I would like them to be loaded asynchronously and once all APIs are loaded, broadcast a message. Is this achievable? If so, how?

An example demonstrating this would be greatly appreciated.

javascriptangularjsapigoogle-cloud-endpoints

Answer №1

Here is a suggested approach:

 Load API 1: gapi.client.load('myapi1', 'v1', function() {}, '/_ah/api');
 Load API 2: gapi.client.load('myapi2', 'v1', function() {}, '/_ah/api');
 Load API 3: gapi.client.load('myapi3', 'v1', function() {}, '/_ah/api');

$q.all([Load API 1, Load API 2, Load API 3]).then(function() {
  $rootscope.$broadcast("All loaded");
}

The $q service will ensure all calls are completed before broadcasting the message.

Refer to $q documentation and an article on callback hell for more information.

Answer №2

var count = 
    gapi.client.load('api1', 'v1', function() {count--}, '/_ah/api');
    gapi.client.load('api2', 'v1', function() {count--}, '/_ah/api');
    gapi.client.load('api3', 'v1', function() {count--}, '/_ah/api');

    var checkIfAPIsLoaded = function(){ 
        console.log(count)
        if(count == 0){
            $rootscope.$broadcast("All APIs loaded");
            clearInterval(intervalId)
        }
    }
    var intervalId = setInterval(checkIfAPIsLoaded, 300);

I encountered an issue with the provided solution, so I implemented a workaround to ensure reliability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty in adding a simple return to render an array in React for list creation

After establishing a basic object, I noticed that it contained an internal object named "orders" with an array of toppings like "Cheese" and "Bacon". To further explore this structure, I segregated the array and directed it to a function called renderToppi ...

javascriptarraysreactjs

Angular.js: Tips for creating a flexible 'modal' component with dynamic templates and controllers

Looking for suggestions on the best way to handle this situation. Currently, I have a DOM element in my application that functions as a modal by appearing from the right side of the viewport. Within various controllers in the app, I need the ability to loa ...

angularjsangularjs-scope

Having difficulty changing the visibility of a div with Javascript

I've developed a piece of vanilla JavaScript to toggle the visibility of certain divs based on the field value within them. However, I'm encountering an issue where trying to unhide these divs using getElementById is resulting in null values. D ...

javascripthtml

Make sure the auto import feature in TypeScript Visual Studio Code Editor is set to always use the ".js" extension

At times, the auto-import completion feature includes the .js extension, but inconsistently. When this extension is missing in the TypeScript source, the emitted JavaScript file may encounter runtime issues like module not found error since the tsc compile ...

javascriptnode.jstypescriptvisual-studio-code

Adjusting the size of icons to fit within a container

I need a div that can display up to 7 icons, depending on certain selections. These icons are from ionicons library. Here is the current code snippet: <div class="item item-text-wrap" style="text-align:center;"> <button class="button" style=" ...

javascripthtmlcssionic-framework

Easily visualize the JSON object hierarchy within Eclipse using JavaScript

Is there a way to view the JSON parse objects structure in Eclipse without using console.log() in Chrome due to cross domain issues? I need assistance with how to view the [object Object] returned structure from Json.Parse. ...

javascriptjqueryjson

Utilizing Ionic's conditional ng-src within an ng-repeat loop

I am trying to customize the avatar image displayed based on a person's condition within an ng-repeat list. However, I am facing issues with the code not showing the correct avatars: $scope.getAvatar = function (person) { if (person.group_id == 1) ...

angularjsionic-framework

Deciphering the Results of AngularJS

What sets 'template' apart from 'templateUrl' in AngularJS directive? index.html: <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <title>Index</title> </he ...

javascriptangularjsangularjs-directive

Leveraging Angular for REST API Calls with Ajax

app.controller('AjaxController', function ($scope,$http){ $http.get('mc/rest/candidate/pddninc/list',{ params: { callback:'JSON_CALLBACK' } }). success(function (data, status, headers, config){ if(ang ...

javascripthtmlangularjsajaxrest

AngularJS Expandable Table - Unlocking Limitless Possibilities

Take a look at the code snippet below: <tbody> <tr ng-repeat-start="ticket in tickets"> <td> <button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button> <button ng-if="!t ...

javascriptangularjs

What is the best way to resize a PDF to match the width and height of a canvas using

I need help with a project involving rendering previews of PDF documents in a UI similar to Google Docs. {documents.map((doc) => { return ( <div key={doc.id} className=" ...

javascriptreactjspdfcanvaspdf.js

Issue with React Routes only occurring in the production website

I'm encountering an issue on my personal website that only occurs in production, but not in my local environment. Here's the situation: I have set up the routes as follows const Routes = () => ( <Router> <Route exact path=&quo ...

javascriptreactjsroutesreact-routerreact-router-dom

Is it feasible to programmatically click a div button in C# using WebBrowser?

Exploring the capabilities of WebBrowser in C#, I came across a website that features a button without an ID, but rather nested within a div element. <div class="pc-image-info-box-button-btn-text pc-cursor"><i class="fa fa-heart" aria-hidden="tru ...

javascriptc#html

The RSS feed is stretching beyond the limits of the table's height

Seeking assistance to adjust the height of an RSS feed widget on my website. The widget is from RSS Dog and I do not have access to the style.css file as it is hosted externally. Despite trying to modify the JavaScript code provided by RSS Dog to set the h ...

javascripthtml

Using the history.push() method from the Action Creator will update the URL without actually redirecting to a new page

I have a login page component that I've set up to redirect to another page after a successful login. However, even though the URL changes correctly, the page remains on the Login page. First, let me show you how I import the history module to be used ...

javascriptreactjsreact-reduxredux-thunkbrowser-history

Having trouble passing parameters to Next JS when using the Courtain.js library

Greetings everyone, I am in the process of developing a website and I have encountered an issue with inserting a distorted image with animation on the homepage. After using a library called Courtain.js, a developer managed to make it work and provided me ...

javascriptreactjsnext.jscurtains.js

Having trouble getting unique input values to pass through ajax

For the past couple of weeks, I've been searching for a solution to my issue. The problem arises in my PHP foreach loop where I have div tags representing rows of data fetched from the database. Each div row contains HTML input elements and a button t ...

javascriptphpjqueryajax

HTML - Transforming JSON data into a table

I'm having trouble converting JSON data into a table format. Although everything seems to be in order, I am unable to view the values on my table. Here is the code I am using to convert JSON to a table: $(function() { var my_data = &ap ...

javascriptjqueryhtmljsonajax

Becoming an expert at managing and solving dependency conflicts

I am facing an issue while setting up a project from my work computer to my home computer due to fixed dependency versions. Here are the dependencies causing the problem: "dependencies": { "@nestjs-modules/mailer": "2.0.2&qu ...

javascriptnode.jsnpmnestjs

How can I extract the text from a textarea in react-bootstrap and pass it to a function when a button is clicked?

Below is the React-Bootstrap code that I am working with: <Form> <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"> <Form.Label>Example textarea</Form.Label> <Form.Control as=&quo ...

javascriptreactjsreact-bootstrap