Javascript code not running as expected

Question

Javascript code not running as expected

Check out this code snippet:

function generateRandomTeams() {
  const prom = new Promise(() => {
    // ...
    console.log('teams', props.state.teams) // logs
  })
  .then(() => {
    console.log('here') // doesn't log
  })
}

I'm facing an issue where the functions inside .then(() => are not getting executed after the initial block. I haven't included a return statement in the process.

Any suggestions on how I can successfully trigger the delayed promise call? Your help is greatly appreciated.

javascript

Answer 1

Answer №1

Make sure to handle the Promise correctly by either resolving or rejecting it. If you do not do either, the promise will remain in a pending state and the corresponding blocks will not be executed.

This image is taken from MDN

https://i.sstatic.net/PbhbY.png

function generateRandomTeams() {
  const prom = new Promise((res, rej) => {
      console.log("teams"); // logs
      res();
    })
    .then(() => {
      console.log("here"); // doesn't log
    })
}

generateRandomTeams();

If you want to run the catch block then you have to reject the Promise

function generateRandomTeams() {
  const prom = new Promise((res, rej) => {
      console.log("teams"); // logs
      rej();
    })
    .then(() => {
      console.log("here"); // doesn't log
    })
    .catch(() => {
      console.log("Error");
    });
}

generateRandomTeams();

Answer 2

Make sure to handle the Promise correctly by either resolving or rejecting it. If you do not do either, the promise will remain in a pending state and the corresponding blocks will not be executed.

This image is taken from MDN

https://i.sstatic.net/PbhbY.png

function generateRandomTeams() {
  const prom = new Promise((res, rej) => {
      console.log("teams"); // logs
      res();
    })
    .then(() => {
      console.log("here"); // doesn't log
    })
}

generateRandomTeams();

If you want to run the catch block then you have to reject the Promise

function generateRandomTeams() {
  const prom = new Promise((res, rej) => {
      console.log("teams"); // logs
      rej();
    })
    .then(() => {
      console.log("here"); // doesn't log
    })
    .catch(() => {
      console.log("Error");
    });
}

generateRandomTeams();

Answer 3

Answer №2

To make use of then, you must first resolve the promise.

function createRandomGroups() {
  const prom = new Promise(resolve => {
    // ...
    console.log('teams') // displays
    resolve();
  })
  .then(() => {
    console.log('here') // does not display
  })
}

createRandomGroups();

It's important to note that typically, 'then' is used as follows:

function CreateRandomTeams() {
  return new Promise(resolve => {
    // ...
    console.log('teams') // displays
    setTimeout(() => {resolve()}, 3500);
  });
}

CreateRandomTeams()
.then(() => {
  alert("After 3.5 seconds: Then executed");
})

Answer 4

To make use of then, you must first resolve the promise.

function createRandomGroups() {
  const prom = new Promise(resolve => {
    // ...
    console.log('teams') // displays
    resolve();
  })
  .then(() => {
    console.log('here') // does not display
  })
}

createRandomGroups();

It's important to note that typically, 'then' is used as follows:

function CreateRandomTeams() {
  return new Promise(resolve => {
    // ...
    console.log('teams') // displays
    setTimeout(() => {resolve()}, 3500);
  });
}

CreateRandomTeams()
.then(() => {
  alert("After 3.5 seconds: Then executed");
})

Javascript code not running as expected

Answer №1

Answer №2

Similar questions

Displaying the state in NextJS rather than revealing server error messages

Troubleshooting: Issues with AngularJS $route.reload() functionality

How can you create a jQuery fade in effect for a single <li> element

The JSON creation response is not meeting the expected criteria

How can I make my Background change on click using hexadecimal color codes?

Is there a way to deactivate or dim a specific hour in an HTML time form?

AngularJs - Show the response only upon verifying the correct answer

Can a wasm file be registered in a similar way to a JavaScript file?

The onClick function within the .map function is continuously triggered

What is the best way to troubleshoot an unresponsive button element to determine the listeners it has?

Sharing properties across various components with Next.js

Prevented a frame from "https://googleads.g.doubleclick.net" from accessing another frame

Implementing objects in a three.js scene without displaying them on the screen

What is the process of turning an SVG element into a clickable link?

What is the method to showcase every single word?

Endless Google Locations Instances

Tips for troubleshooting the error message "is not a function" in a React application

Is it possible to scroll by using the dragenter event?

Axios is experiencing challenges in transmitting the cookie

React app experiencing freezing due to custom asynchronous function utilisation