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 Oct 09 '16 at 06:20 — L_K, Oct 09 '16 at 06:20

score 1 · Accepted Answer · answered Oct 09 '16 at 06:45

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 09 '16 at 06:45

jfriend00

683,504
96
985
979

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 http://stackoverflow.com/questions/39952422/having-trouble-accessing-react-actions-in-isomorphic-application – xtabbas Oct 10 '16 at 07:22
@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. – jfriend00 Oct 10 '16 at 14:13

score 0 · Answer 2 · answered Oct 09 '16 at 07:01

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

Calling function from a function in javascript es6

2 Answers2