vue.js | TypeError: Cannot read property 'then' of undefined

Question

I'm trying to make email verification in my vue.js/express app. I can create the user and send emails. But showing a message like "verification mail sent" won't work.

The error occurs when executing the code in the then() callback after the execution in DataService.

When registering the following functions are executed:

vuex

const actions = {
registerUser({
 commit
}, user) {
 commit('registerRequest', user)

 return DataService.registerUser(JSON.stringify(user))
   // HERE'S THE ERROR
   .then(response => {
     commit('confirmation', response.message)
     setTimeout(() => {
       state.status = {
         confirmHere: ''
       }
     }, 4000);
   })
   .catch(...)

confirmation:

confirmation: (state, msg) => {

    state.status = {
      confirmHere: msg
    }
  },

DataService

registerUser(user) {
// Send email for registration
apiClient.post('/user/register/sendMail', user)
 .then(res => {
   return apiClient.post(`/user/register`, user)
 })
 .catch(err => {
   throw err;
 })

},

The sendmail function is using nodemailer to send an email and returns

  res.status(200).json({
    message: "success"
  });

The register function in express is:

router.post('/register', async (req, res) => {
  try {
    if (req.body.username !== undefined && req.body.password !== undefined) {
      let password = await bcrypt.hashSync(req.body.password, saltRounds);

      let compareUser = await db.getObject({}, User, 'SELECT * FROM app_users WHERE username=? LIMIT 1', [req.body.username]);
      if (compareUser !== undefined) {
        res.status(409).json('User already exists');
        return;
      }

      const tmp = {
        username: req.body.username,
        password: password
      };

      await db.query('INSERT INTO app_users SET ?', [tmp]);
      let user = await db.getObject({}, User, 'SELECT * FROM app_users WHERE username=? LIMIT 1', [req.body.username]);
      if (user === undefined)
        res.status(500).json('Internal server error');

      res.status(201).json({
        "message": "Bestätigungs-Email gesendet."
      });
    } else {
      res.sendStatus(400);
    }
  } catch (error) {
    res.sendStatus(500);
  }
});

You need to add return before apiClient.post.... in registerUser. It doesn't return anything. — ginga_ninja217
– ginga_ninja217, Commented Dec 30, 2020 at 13:16

Naren · Accepted Answer · 2020-12-30 13:17:59Z

2

You forgot to return the response from DataService.registerUser

// DataService.js
registerUser(user) {
 // Send email for registration
 return apiClient.post('/user/register/sendMail', user)
   .then(res => {
     return apiClient.post(`/user/register`, user)
   })
   .catch(err => {
     throw err;
   })

answered Dec 30, 2020 at 13:17

Naren

4,5293 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ian · Accepted Answer · 2020-12-30 13:24:12Z

2

The issue is that your registerUser function doesn't return anything whereas you're expecting it to return a promise.

Change your registerUser to:

registerUser(user) {
  // Send email for registration
  return apiClient.post('/user/register/sendMail', user)
   .then(res => {
     return apiClient.post(`/user/register`, user)
   })
}

(FYI in the example, I left the .throw out because it already gets handled by the Promise you return ;)

answered Dec 30, 2020 at 13:24

Ian

4712 silver badges7 bronze badges

Collectives™ on Stack Overflow

vue.js | TypeError: Cannot read property 'then' of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related