Calling function from a function in javascript es6

Question

I'm using es6 javascript with babel and trying to make an ajax call using xhr using two function but getting an error Uncaught TypeError: this.post is not a function

What is the correct syntax to make a call to a function from another function defined in the same class in es6 javascript?

Thanks for your answer this is my code

import alt from '../../alt';
import cookie from 'react-cookie';

class LoginActions {
  constructor(){
    this.generateActions(
      'updatePassword',
      'updateName',
      'loginSuccess',
      'loginFail',
      'remember'
    );
  }   
    // Generic get request
    post(url, data, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    callback(null, xhr.responseText);
                } else {
                    callback(xhr.statusText);
                }
            }
        };
        xhr.send(data);
    }

    // Get actual content
    login(name, password, remember) {
      var data = "name="+name+"&password="+password+"&remember="+remember;
        this.post('api/login', data, function(err, data) {
            if (!err) {
              this.actions.loginSuccess(data.message);
            } else {
                this.actions.loginFail(JSON.parse(data.message));
            }
        }).bind(this);
    }




}

export default alt.createActions(LoginActions);

Edit1: This is how I call login function / also passed data to xhr request above

handleSubmit(event){
    event.preventDefault();

    var name = this.state.name;
    var password = this.state.password;
    var remember = this.state.remember;

    LoginActions.login(name, password, remember);

  }

Can you please show the way you call login function?

L_K
– L_K

2016-10-09 06:20:57 +00:00
Commented Oct 9, 2016 at 6:20 — L_K
– L_K, Commented Oct 9, 2016 at 6:20

jfriend00 · Accepted Answer · 2016-10-09 06:45:53Z

1

Your methods login() and post() are instance methods, not static methods. So you have to create an instance of your LoginActions object with new in order to properly call those methods on that object.

Or if you don't actually need an instance with instance data, then make all the methods static and refer to them as LoginActions.post() and LoginActions.login(), not using this.

Instead, you're trying to mix and match. You're calling LoginActions.login() which is a static type call and then inside of login(), you're trying to reference this which assumes an instance.

answered Oct 9, 2016 at 6:45

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

2 Comments

xtabbas Over a year ago

Hi @jfriend00, Yesterday after reading your answer i went on to use superagent for making ajax calls and i was able to use this.actions.* in the static method login(); after the ajax request ends. But today i reinstalled node modules and Im stuck at the same problem again.. this.actions.* is giving me undefined when used inside static method of login()... Whats going on? Can you please explain what can i do to solve this? Please read this for further clarification stackoverflow.com/questions/39952422/…

jfriend00 Over a year ago

@eersteam - Do you understand that this is used only with an instance of your object that you create with new, not with static methods? This is a basic concept of object oriented development in Javascript. You need to understand that if you're going to use this, then you need an instance of your object.

Vigneshkumar Chinnachamy.M · Accepted Answer · 2016-10-09 07:01:32Z

Give these things a try:

As @jfriend00 suggested, create an instance of LoginAction class and call login method on that:

var loginAction = new LoginActions();
loginAction.login(name, password, remember);
define generateActions method in LoginActions class.
this.post('api/login', data, function(err, data) { if (!err) { this.actions.loginSuccess(data.message); } else { this.actions.loginFail(JSON.parse(data.message)); } }).bind(this);
Here, you seem to be trying to bind this to the callback. But actually you are binding this to the return value of post method. To bind this to the callback, this.post('api/login', data, function(err, data) { if (!err) { this.actions.loginSuccess(data.message); } else { this.actions.loginFail(JSON.parse(data.message)); } }.bind(this));
Notice function(){}.bind instead of the post(function(){}).bind

Collectives™ on Stack Overflow

Calling function from a function in javascript es6

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related