0

I am learning promise in JavaScript but I don't understand why my function doesn't return the right value.

This is my function:

function promise() {
  let p = new Promise((resolve, reject) => {
    return resolve(["a", "random", "array"]);
  });

  p.then((response) => {
    return response;
  }).catch((error) => {
    return error;
  });
}

console.log(promise());

If I run the code I get undefined.

I think the problem is that the console.log is executed before the value of the .then is returned.

Can somebody please help me to solve this problem and maybe explain the problem? :)

Thanks for every answer.

jsejcksn
  • 27,667
  • 4
  • 38
  • 62
tombiebl
  • 1
  • 1
    Your `promise` function has no `return` statement. – trincot Jun 23 '22 at 19:35
  • @trincot so if I return a value in the .then the return doesn't count for the outer function ? – tombiebl Jun 23 '22 at 19:37
  • @Lucretius but when we are in the callback of p(response) we should break out of the main function don't we ? – tombiebl Jun 23 '22 at 19:38
  • 1
    The `return` in the callback function counts for the callback function only. BTW, that `return` executes *after* the main function has already finished. – trincot Jun 23 '22 at 19:40
  • @trincot Ah okay thanks :) Yeah i know but how can I solve this problem ? So that the main function returns the value that is resolved in the promise ? – tombiebl Jun 23 '22 at 19:42
  • This is a very common question. You'll have some interesting reading to do via the link in the blue box at the top. – trincot Jun 23 '22 at 19:45

1 Answers1

1

Two things:

  1. You must return the promise p from within the promise function.

  2. You must await the result of the promise returned by the function before you can access its fulfilled value:

function promise() {
  let p = new Promise((resolve, reject) => {
    return resolve(["a", "random", "array"]);
  });

  p.then((response) => {
    return response;
  }).catch((error) => {
    return error;
  });
  
  // 1. Return the promise from the function:
  return p;
}

// 2. Await the result before using it:
promise().then((result) => {
  console.log(result);
});

You said you're learning about promises. Async/await makes all of this much easier:

<script type="module">
// Top level await is available in ES modules

async function promise () {
  try {
    return ["a", "random", "array"];
  }
  catch (exception) {
    return exception;
  }
}

const result = await promise();
console.log(result);

</script>
jsejcksn
  • 27,667
  • 4
  • 38
  • 62
  • Okay thank you but If i declare a variable where the result should be assigned to i get Promise {}: {function promise() { let p = new Promise((resolve, reject) => { return resolve(["a", "random", "array"]); }); p.then((response) => { return response; }).catch((error) => { return error; }); // 1. Return the promise from the function: return p; } // 2. Await the result before using it: var temp = promise().then((result) => { return result }); console.log(temp)} – tombiebl Jun 23 '22 at 19:45
  • how can I post the right format of the code in an comment ? xD – tombiebl Jun 23 '22 at 19:47
  • @tombiebl Multi-line formatting in a comment is not possible. – jsejcksn Jun 23 '22 at 19:49
  • so i can't assign a variable with promise ? BTW thanks for your answers :) – tombiebl Jun 23 '22 at 19:51
  • @tombiebl See the update to my answer for `await`ing a promise and assigning the fulfilled value to a variable. You can read more at these great articles on MDN: [Using Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises), [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await). Good luck with your learning! – jsejcksn Jun 23 '22 at 19:52
  • works ! thank you very much ! I'll check out the Links you commentet ;) – tombiebl Jun 23 '22 at 20:11