'Why does a syntax error occur after restart?

I'm running my little testsite on localhost (although currently there isn't even serverside interaction yet). Everything worked fine until I restarted my PC. Oo

Now, when running the site, the following error is thrown:

Uncaught SyntaxError: Unexpected token new

Here's the code:

let promise1 = new Promise ((resolve, reject) => {
  resolve('string1');
})

 function starter (){
  promise1.then(new Promise (stringParam1) => {
    //if(stringParam1){
    console.log("stringParam1 is ", stringParam1);
       setTimeout(function(){
        console.log("timeout was executed")
        return stringParam1 + 'string2'
      }, 1000)
/*    }else{
      return 'fail1'
    }*/

  }).then((stringParam2) => {
    console.log("stringParam2 is ", stringParam2)
    return stringParam2 + 'string3'
  }).then((stringParam3) => {
    console.log(stringParam3)
  })
}

<!DOCTYPE html>
<html>
    <head>
        <title>PHP is Awesome!</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <link rel = "stylesheet" type = "text/css" href = "MyFirstPhP.css">
    </head>
        <body>
            <button onclick="starter()">promise</button>
            <p id = "output">testoutput</p>
            <script src="MyFirstPhP.js"></script>
        </body>
</html>

Solution 1:^[1]

You are missing a parenthesis. You also never resolve a promise in your setTimeout function.

let promise1 = new Promise((resolve, reject) => {
  resolve('string1');
})

function starter() {
  promise1.then(stringParam1 => new Promise((resolve, reject) => {
    console.log("stringParam1 is ", stringParam1);
    setTimeout(function() {
      console.log("timeout was executed")
      resolve(stringParam1 + 'string2')
    }, 1000)
  })).then((stringParam2) => {
    console.log("stringParam2 is ", stringParam2)
    return stringParam2 + 'string3'
  }).then((stringParam3) => {
    console.log(stringParam3)
  })
}

starter();

Async/Await will really make this cleaner. It will reduce nesting and parentheses, and make your code easier to read and reuse.

let promise1 = async() => {
  return 'string1';
}

let promise2 = (param) => new Promise((resolve, reject) => {
  console.log("stringParam1 is ", param);
  setTimeout(() => {
    console.log("timeout was executed")
    resolve(param + 'string2')
  }, 1000)
})

let promise3 = async(param) => {
  return param + 'string3'
}

async function starter() {
  let stringParam1 = await promise1()
  let stringParam2 = await promise2(stringParam1)
  console.log("stringParam2 is ", stringParam2)
  let stringParam3 = await promise3(stringParam2)
  console.log(stringParam3)
}

starter()

Solution 2:^[2]

There are a few issues, not just syntax related. First in your start function you are modifying the data that is resolved in promise inside of an async operation (setTimeout) so you can't return anything and instead need to call resolve/reject. The new Promise() should be returned inside of an anonymous function which is provided your value from promise.

Then inside of your starter function you can modify what is returned in the subsequent then methods. The starter function will now return a promise with the wrapped and modified value which is currently undefined since nothing is returned in your anonymous function as the argument to the last then method of the promise chain.

const promise = new Promise((resolve, reject) => {
  resolve('string1')
})

function starter() {
  return promise.then((stringParam1) => {
    return new Promise((resolve, reject) => {
      console.log('stringParam1 is ', stringParam1)
      setTimeout(() => {
        console.log('timeout was executed')
        resolve(stringParam1 + 'string2')
      }, 1000)
    })
  }).then((stringParam2) => {
    console.log('stringParam2 is ', stringParam2)
    return stringParam2 + 'string3'
  }).then((stringParam3) => {
    console.log(stringParam3)
  })
}

starter();

Solution 3:^[3]

Your code missed paranthesis around the promise1.then lambda. Here is the fixed code :

let promise1 = new Promise ((resolve, reject) => {
  resolve('string1');
})

 function starter (){
  promise1.then(new Promise ((stringParam1) => {
    //if(stringParam1){
    console.log("stringParam1 is ", stringParam1);
       setTimeout(function(){
        console.log("timeout was executed")
        return stringParam1 + 'string2'
      }, 1000)
/*    }else{
      return 'fail1'
    }*/

  })).then((stringParam2) => {
    console.log("stringParam2 is ", stringParam2)
    return stringParam2 + 'string3'
  }).then((stringParam3) => {
    console.log(stringParam3)
  })
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Grégory

'Why does a syntax error occur after restart?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]