Why can't I use pushed History.state property set in a fetch API function?-CodePudding

I wrote a function call API using fetch() function and then push received json to History.state using history.pushState(json). I need to use the state property afterwards but when I test console.log(history.state) right after that function, it printed null

What I tried:

function1();
function2();

function function1() {
  const request = new Request('https://reqres.in/api/users?page=2');
  fetch(request)
  .then(response => response.json())
  .then(
    json => 
    {
      history.pushState(json,'','');
      console.log(history.state)
    }
  );
}

function function2() {
  console.log(history.state);
}

I even tried to wait util history.state not null using while loop (because I think it can be the order problem) but it didn't work. I want to print out exactly what I push to history.state before, this is what actually resulted:

null
// [object Object] 
{
  "page": 2,
  "per_page": 6,
  "total": 12,
...

This is a demo of the problem on codepen: https://codepen.io/L-Ph-t-the-scripter/pen/PoaeqzJ

CodePudding user response：

Welcome to Stackoverflow!

function1 uses promises, so function2 is called to early. Try putting function2 right after the history.pushState call.

function1();

function function1() {
  const request = new Request('https://reqres.in/api/users?page=2');
  fetch(request)
  .then(response => response.json())
  .then(
    json => 
    {
      history.pushState(json,'','');
      function2();
      console.log(history.state)
    }
  );
}

function function2() {
  console.log(history.state);
}

Basically, .then waits for it (the request) to finish but continues running other code while waiting, making function2 run before function1 is finished.

I would recommend reading this or this. Good luck!

CodePudding user response：

You have the problem because function1 is async. So you should wait for its response and then running function2.

For this you have 2 options. First is to use async/await function like this:

function async runFunctions() {
  await function1();
  function2();
}

runFunctions();

function async function1() {
  const request = new Request('https://reqres.in/api/users?page=2');
  fetch(request)
  .then(response => response.json())
  .then(
    json => 
    {
      history.pushState(json,'','');
      console.log(history.state)
    }
  );
}

function function2() {
  console.log(history.state);
}

And second way is to call function2 after getting function1 response:

function1();

function async function1() {
  const request = new Request('https://reqres.in/api/users?page=2');
  fetch(request)
  .then(response => response.json())
  .then(
    json => 
    {
      history.pushState(json,'','');
      console.log(history.state);
      function2();
    }
  );
}

function function2() {
  console.log(history.state);
}