3

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);

  }
4

2 回答 2

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.

于 2016-10-09T06:45:53.300 回答
0

Give these things a try:

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

    var loginAction = new LoginActions();
    loginAction.login(name, password, remember);

  2. define generateActions method in LoginActions class.

  3. 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

于 2016-10-09T07:01:32.547 回答