CODEWITHSUNDEEP
javascriptpromisegoogle-chrome-devtoolsfetch-apiconsole.log
Hamid Ali
Hamid Ali

Reputation: 29

Console log not printing response from the server via fetch()

I am using a script to send transactions from my card website to localhost, which is accurately receiving it and also successfully sends a json response but after that console.log isn't displaying it at all. I can check the response on network tab in dev tools but just curious what's the reason for not printing json response.

async function sendData(username, transactions) {
  let apiUrl = "http://localhost:3100/api";
  let postOptions = {
    method: "POST",
    cache: "no-cache",
    headers: {
      "Content-Type": "application/json",
    },
    redirect: "follow",
    referrerPolicy: "no-referrer",
    body: JSON.stringify({ username, transactions }),
  };

  try {
    let response = await fetch(apiUrl, postOptions);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }
    let serverMessage = await response.json();
    console.log(serverMessage);
  } catch (error) {
    console.log(error.message);
  }
}

I even tried without async as following but still nothing printed.

function sendData(username, transactions) {
  let apiUrl = "http://localhost:3100/api";
  let postOptions = {
    method: "POST",
    cache: "no-cache",
    headers: {
      "Content-Type": "application/json",
    },
    redirect: "follow",
    referrerPolicy: "no-referrer",
    body: JSON.stringify({ username, transactions }),
  };

  fetch(apiUrl, postOptions)
    .then((res) => res.json())
    .then((msg) => console.log(msg))
    .catch((e) => console.log(e));
}

One Clarification: When I run the same code (with some triggering front end of course) in a JS injector chrome extension (e.g; scripty), it then prints the response, but not when I call it manually in console.

PROBLEM SOLVED* After thorough inspection I found that the problem was actually in the console.log object (but only on my credit card website). Its name property is set to empty string and arguments to null. I don't know if the card website does it or any other reason, but that's what I found. I changed all console.log to console.info and that works fine. But it seems purely a website issue. Thanks for all replies and comments.

Upvotes: -5

Views: 105

Answers (1)

Sergey A Kryukov
Sergey A Kryukov

Reputation: 916

I just tested it with a simulated server side through my URL where the server side responds with some JSON content.

The only modifications to your code were: 1) this URL, 2) I added the call to sendData at the end: sendData("user", null);.

Everything works, and it works with your original asynchronous variant. The line console.log(serverMessage); outputs exactly the test JSON string prescribed on the server side. I tested your code with node.js.

So, the problem is not in the code you've presented in your question. The possible problems may lie in wrong observations: you could have stopped the server on your localhost, the server part could be broken between your tests, the piece of code calling sendData could be modified between your tests and broken, or you could have presented not exactly the same JavaScript as you've been executing. Please double-check everything, and your script should work again.

Added:

From the comments to this answer, it looks like they confirm my conclusion that the problems were caused not by the script you've presented in your question, and the script actually works. The issue could be, as I mentioned, wrong observation, in particular, some problems with the debugging environment, such as UI issues. In some cases, the console.log actually works, but, for some reason, you cannot see the output on the console. It is not related to the script itself.
I provided some debugging recommendations in my comments to this answer — in particular, one reliable technique is doing server-side logging.

Upvotes: 3

Related Questions