CODEWITHSUNDEEP
javascriptpromise
Jason
Jason

Reputation: 396

Call a function inside promise

I'm trying to find a way to call the method pageLoader.fetch twice in this promise. I already tried to separate it in a new promise but I get undefined when I try to get the variable links[0]. How to do this?

pageLoader
  .fetch(url)
  .then(function(data) {
    links = html.orderdList(data);
  })
  .then(function() {
    return pageLoader.fetch(links[0]);
    //links[0] is undefined in the next line!?
  })
  .then(
    pageLoader
      .fetch(links[0])
      .then(function(innerLinks) {
        calLinks = html.unorderList(innerLinks);
      })
      .then(function() {
        return pageLoader.fetch("http:///example.com");
      })
      .catch(function(error) {
        console.log(error);
      })
  );

Upvotes: 1

Views: 4906

Answers (2)

Mark
Mark

Reputation: 92440

You're almost there. You have some redundant, then()s, which I've removed. It's not clear why you are calling pageLoader.fetch(links[0]) twice. Does it return different results?

You also look like you are setting some global variable (links & calLinks for example), but it's not clear how you will access them asynchronously.

This should work a little better, but given the above, it may still have issues:

pageLoader.fetch(url)
.then(function(data) {
  links = html.orderdList(data); // <-- are these global or should you have a var?; 
  return pageLoader.fetch(links[0]);
})
.then(function(link) { // <-- did you want to do something with the return from above?
  return pageLoader.fetch(links[0])
})
.then(function(innerLinks) {
    calLinks = html.unorderList(innerLinks); // <-- are these global?;
    return pageLoader.fetch("http:///example.com");
})
.catch(function(error) {
    console.log(error);
})

Upvotes: 2

Briley Hooper
Briley Hooper

Reputation: 1271

The line .then(pageLoader.fetch(links[0])...) is not doing what you probably want it to be doing. Calling it like that is the equivalent of doing this:

var myCallback = pageLoader.fetch(links[0]).then().then().catch();

pageLoader
  .fetch(url)
  .then(function(data) {
    links = html.orderdList(data);
  })
  .then(function() {
    return pageLoader.fetch(links[0]);
  })
  .then(myCallback)

Your second fetch is actually being immediately executed before everything else and the result of that is being passed as the callback. You probably want to not call that code until the first fetch has happened, so you'll want to wrap it in a function (like with your other .then() statements).

I might also suggest that you could greatly simplify your code:

pageLoader
  .fetch(url)
  .then(function(data) {
    // this is called when the first fetch() returns
    links = html.orderdList(data);
    return pageLoader.fetch(links[0]);
    // returning a promise means that following .then()
    // statements will act on the returned promise rather than the original
  })
  .then(function(innerLinks) {
    // this is called when the second fetch() returns
    calLinks = html.unorderList(innerLinks);
    return pageLoader.fetch("http:///example.com");
  })
  .catch(function() {
    // this is called if the original promise or any of
    // the promises returned in the .then() callbacks throw errors
  });

I found this article to be very helpful in explaining the best ways to use Promises, and some of the mistakes that can happen: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

Upvotes: 1

Related Questions