Callback undefined when requesting too fast

[Javi Caballero]

Hi,

Im having some troubles using this component. I need to do 2 request to the Instagram API:

<!-- Instagram API -->
    <byutv-jsonp
        id="requestPosts"
        url="https://api.instagram.com/v1/users/self/media/recent/"
        params="{{posts_params}}"
        on-response="_posts_response"
        >
    </byutv-jsonp>

     <byutv-jsonp
        id="requestComments"
        url="https://api.instagram.com/v1/media/{{post_id}}/comments"
        params="{{posts_params}}"
        on-response="_comments_response"
        >
    </byutv-jsonp>

The first one works well as its only generated once at the start. But the other one is generated within a loop:

for (var i=0; i < ARRAY.length ; i++) { ... this.$.requestComments.generateRequest(); };

When requesting using the same too many times too fast im getting the "callback is not defined" error therefore i cant get the data from the API.

The callback functions (_posts_response and _comments_response works well the first time so they are not the problem).

Do you have any idea of whats happening? Am i using it right?

Thank you!!

[coderfin]

IDs in elements are meant to be unique. If you are generating the #requestComments in a loop the ID will be duplicated. Can you try changing the ID for each iteration of the loop?

[Javi Caballero]

The components are not generated inside the loop, just the requests. I mean the components are defined on the template just once but i use the method generateRequest() from the second component (#requestComments) inside a loop. Anyways i have tried to change the id of the component for each iteration but nothing happens.

I just put a 400ms delay between each call and it worked. Smaller delays make the call fail again.

[coderfin]

You need to create a new element for each iteration of your loop if you want a different response for each iteration. Each element can only handle one response at a time. If you only have one element its callback function on the window object will be overwritten every time a request is made.

Can you try creating a new element for each iteration of the loop and see if that works? Am I correct in assuming that you want different responses for each iteration?

[Javi Caballero]

Yes, i want different responses for each iteration. Well, finally i have tried to set the component to auto instead of generating the request myself and it worked. The key is to change the request params when the last request is finished, this is inside the on-response method.

I set the parameters for the first call but i let the component make the request himself:

while(this.i < this.posts.length-1 && !done){
          if(this.posts[this.i].comments.count > 0){
            //Change the postID to generate a new request
            this.post_id = this.posts[this.i].id;
            done = true;
          }
          this.i++;
        }

Then on the response method i set the parameters for the next request

_comments_response: function(event, detail){
        ...        
        while(this.i < this.posts.length-1 && !done){
          if(this.posts[this.i].comments.count > 0){
            //Change the postID to generate a new request
            this.post_id = this.posts[this.i].id;
            done = true;
          }
          this.i++;
        } 
      },

So every call generates a response and every response generates the next call.
If i use the same logic but i make the requests with the .generateRequest() method instead of setting the component to auto the undefined callback error appears again. So there is something that the component does automatically but it does not when you use the .generateRequest() method.

Thank you for your help!!

[coderfin]

Glad you found a solution. If you run into anything else reopen this issue or create a new issue.