CODEWITHSUNDEEP
javascriptfirefoxget
user5858
user5858

Reputation: 1221

Fetch URL call shows Promise { <state>: "pending" }

Why this url fetch isn't working?

Actually this GET method is passing some error message to be stored:

fetch('http://www.govtschemes.in/pushlo90.php?msg=alert-bid:0.120148336001477231576473857578-Please%20enter%20correct%20captcha', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {
    // Error :(
});

However if I typein same URL ( http://www.govtschemes.in/pushlo90.php?msg=alert-bid:0.120148336001477231576473857578-Please%20enter%20correct%20captcha ) in browser it works.

Some other places in WebExension it's working properly.

But not working in another place. Also when I enter in Firefox console too it does not work. It shows some "pending.."

This function too is showing the same behavior:

function ff_httpGetAsync(theUrl, callback, failed_cb) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      // console.log("Successfully downloaded the ajax page");
      if (callback) {
        if (xmlHttp.responseURL == theUrl) {
          callback(xmlHttp.response);
        } else {
          console.log("diff response url received" + xmlHttp.responseURL);
        }
      }
    } else {
      // console.log("Got status =", xmlHttp.status);
    }
  }

  xmlHttp.open("GET", theUrl, true); // true for asynchronous 
  console.log("Gettiy :" + theUrl);
  xmlHttp.send(null);
}

ff_httpGetAsync('http://www.govtschemes.in/pushlo90.php?msg=alert-bid:0.120148336001477231576473857578-Please%20enter%20correct%20captcha', function() {

}, function() {});

I've checked the server. In this case backend pushlo90.php isn't getting called.

Not sure what is wrong with my URL?

Upvotes: 0

Views: 795

Answers (3)

shiva2492
shiva2492

Reputation: 429

So, the code block that is shown in your question is - 

fetch('http://www.govtschemes.in/pushlo90.php?msg=alert-bid:0.120148336001477231576473857578-Please%20enter%20correct%20captcha', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {
    // Error :(
});

So, what it says is fetch module will send a GET request to the URL provided in the request and the response or the error will go into the respective chained functions.

The error could be 404(Not found) or 401(Unauthorized) etc.

To check the error put some logging into your HTTP request handlers.

fetch('http://www.govtschemes.in/pushlo90.php?msg=alert-bid:0.120148336001477231576473857578-Please%20enter%20correct%20captcha', {
    method: 'get'
}).then(function(response) { 
   console.log(`Response is {response}`) 
}).catch(function(err) {
   console.log(`Error is {err}`) 
})

And for your other code here is the screenshot of what is getting returned from your code -

enter image description here

Where it clearly states 404 (Not found), hence your code will go in the error handler.

Upvotes: 0

fubar
fubar

Reputation: 383

The fetch function return a promise that when resolved returns a HTTP response. You then can access the HTTP response Example:

fetch(`https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1`)
.then(response => {
    // HTTP response which needs to be parsed
    return response.json()
})
// accessing the json
.then(json =>console.log(json))

So the question you have to ask yourself is: what is returned from the call?? Also be aware that 404 and other HTML error codes wont lead to a reject of the promise so don't bother with catch.

For more details see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Upvotes: 0

Felix Lepoutre
Felix Lepoutre

Reputation: 121

That result tells you the promise isn't answered yet. It might work in some occasions when the promise is handled very quickly, before the page is rendered.

Using a promise you basically say 'promise me you will do this'. This promise is either resolved or rejected. Before it's resolved or rejected, it's always pending.

Adding some logging in your first function should explain. 

fetch('http://www.govtschemes.in/pushlo90.php?msg=alert-bid:0.120148336001477231576473857578-Please%20enter%20correct%20captcha', {
    method: 'get'
}).then(function(response) {
    console.log(response) //do something with response data the promise gives as result
}).catch(function(err) {
    console.log(err)// Error :(
});

If you don't want to use the .then(), use async/await. 

const functionName = async () => {
    const result = await fetch(
        "http://www.govtschemes.in/pushlo90.php?msg=alert-bid:0.120148336001477231576473857578-Please%20enter%20correct%20captcha",
        {
            method: "get"
        }
    );
    console.log(result); //this will only be done after the await section, since the function is defined as async
};

functionName();

Upvotes: 7

Related Questions