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

javascript fetch example
fetch response
fetch no-cors
fetch get params
fetch async/await
javascript fetch w3schools
fetch api post form data
fetch cors

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?

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();

Fetch, The Promise returned from fetch() won't reject on HTTP error status even if If you only want to send credentials if the request URL is on the same origin as The following example shows one way to do this by creating a line� Using Fetch API and Promises. We will now work on a simple example where we will use the Fetch API and Promises in order to render a list that contains data from an API endpoint.. We will be using

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

Using Fetch, You will learn how to make a HTTP request using Fetch API, learn the When we log the response, it will show this Promise is in pending state. const URL = " https://ghibliapi.herokuapp.com/people";const main = document. fetch(url).then(response => { if (response.ok) { return response } return Promise.reject(Error('error')) }).catch(error => { return Promise.reject(Error(error.message)) }) 2) Keeping this in mind you can simplify your code with early returns and fewer branches:

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 -

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

How to make HTTP requests using Fetch API and Promises, The main difference is that the Fetch API uses Promises, which enables a simpler and We just want to request a URL, get a response and parse it as JSON. At #1 above, we respond to the successful resolution of the fetch() promise by starting the process of reading the body text, returning the promise from text(). At #2 above, we respond to the successful resolution of text()'s promise by using the resulting text (a string containing JSON).

Introduction to fetch() | Web, Metadata; headers; status; statusText; url; Body content. Request Object; Request Calling fetch() returns a promise. We can then wait for the� The Promise returned from fetch () won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

The Fetch API, A few comments: 1) fetch already returns a promise, which means this: new Promise((resolve, reject) => { return fetch(url).then(response => { if (response.ok) � let promise = fetch(url, [options]) url – the URL to access. options – optional parameters: method, headers etc. Without options, that is a simple GET request, downloading the contents of the url.

Using fetch() and a new Promise object to get API results, await response of fetch call log response or catch error of fetch promise async getRequest(url){ let data = await (await (fetch(url) .then(res => { return res. json() }) await , just return the promise itself return result.json() as @senner007 says. Fetch returns a promise, and you can chain multiple promises, and use the result of the 1st request in the 2nd request, and so on. This example uses the SpaceX API to get the info of the latest launch, find the rocket's id, and fetch the rocket's info.

Comments
  • You might be running into CORS depending on which site you try to execute the fetch
  • but i don't want to read any data. It's already working in many places. But in one place and when typed in Firefox Console it isn't working
  • Running await fetch(/* ... */); in Chrome's console returns a 404 for me. However, using a CORS Proxy worked fine and I got back "processing/var/www/govtschemes.in/logs/21-12-2019.log". Try, "https://cors-anywhere.herokuapp.com/{orignial URL}".
  • yes i think it is caused by mixed block content. It seems to be working fine after i enabled mixed content in browser( docs.adobe.com/content/help/en/target/using/experiences/vec/… )